Check if an option already exists in a multi select box using JavaScript

Question

My question is same as this - How can I check whether a option already exist in select by JQuery

Although I want to know how it can be done using JavaScript rather than using jQuery. I've tried using the indexOf() , === among other things, but I'm not sure if my approach is correct.

P.S : If you're marking it as a duplicate, do link me with the question that has the answer in JavaScript. Thank you.

Also, reasons for down voting are welcome.

My approach :

var foldersList = document.getElementById("folders");
    for(var i=0; i<foldersList.length; i++)
    {
       if(!(foldersList.options[i].value.indexOf("someValue") === -1))
       {
             //do something
       }
    }

Can you show your approach, and tell why you think it is not correct? document.querySelectorAll('select option[value="something"]').length > 0 ? — putvande
– putvande, Commented Jun 11, 2014 at 8:25
Can you show how you tried to do it and tell us what exactly didn't work? — ivarni
– ivarni, Commented Jun 11, 2014 at 8:26
I iterated through the select box to search for the value, is that a correct approach? — Anjan Baradwaj
– Anjan Baradwaj, Commented Jun 11, 2014 at 8:29
It seems that foldersList.length should be foldersList.options.length. — Ja͢ck
– Ja͢ck, Commented Jun 11, 2014 at 8:39
@ivarni—Select elements do have an options collection. @jack—Select elements do have a length property that is the number of options (i.e. the length of the select's options collection). — RobG
– RobG, Commented Jun 11, 2014 at 8:46

putvande · Accepted Answer · 2014-06-11 08:28:27Z

3

You could use document.querySelectorAll:

document.querySelectorAll('#yourSelect option[value="yourValue"]').length > 0

Thats the same as:

$("#yourSelect option[value='yourValue']").length > 0;

answered Jun 11, 2014 at 8:28

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ivarni Over a year ago

Descendant selectors doesn't work in IE8 if memory serves me right. Though, really, it's about time we stopped targetting IE8.

RobG Over a year ago

@ivarni—it's not so much about "targeting" IE8, but supporting users who use it, which is about 1/4 of IE users (depending on whose statistics you believe, of course). :-)

ivarni Over a year ago

While "target" probably wasn't the best choice of words, I still think we need to move on from IE8 soon. Yes, people are using it, but us supporting that does not help them migrate from it.

Mohsen Esmailpour · Accepted Answer · 2014-06-11 08:31:08Z

2

var yourSelect = document.getElementById("yourSelect");
for (i = 0; i < yourSelect.length; ++i) {
   if (yourSelect.options[i].value == "someValue") {
      alert("someValue is available");
   }
}

answered Jun 11, 2014 at 8:31

Mohsen Esmailpour

11.6k3 gold badges49 silver badges70 bronze badges

Comments

Ja͢ck · Accepted Answer · 2014-06-11 08:36:28Z

2

The simple way, supported even by the most antique browsers:

function selectHasOption(select, value)
{
    for (var i = 0, len = select.options.length; i != len; ++i) {
        if (select.options[i].value == value) {
            return true;
        }
    }
    return false;
}

And this is the expression:

selectHasOption(document.getElementById('folders'), 'someValue')

edited Jun 11, 2014 at 8:36

answered Jun 11, 2014 at 8:29

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Collectives™ on Stack Overflow

Check if an option already exists in a multi select box using JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related