Check if value is in select list with JQuery

Question

How can I, using JQuery, check if a value belongs to dropdown list or not?

Lachlan Roche · Accepted Answer · 2010-02-12T01:16:52.107

199

var thevalue = 'foo';
var exists = 0 != $('#select-box option[value='+thevalue+']').length;

If the option's value was set via Javascript, that will not work. In this case we can do the following:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

edited Feb 12 '10 at 01:16

answered Feb 12 '10 at 01:08

Lachlan Roche

25,678
5
79
77

8

The explicit second approach is also safer as it allows option values containing any character, including `]` and `\\`. Avoid building selector strings from raw text without doing proper CSS-escaping. – bobince Feb 12 '10 at 01:28
15

Return false is used to break/end .each loop. – Angel May 16 '13 at 11:47
If you create new options by JavaScript using this logic: $('#select-box').append($('')); (or of course in more talkative style), the first example will work (you don't need to iterate). – Lukas Jelinek Dec 01 '14 at 19:37
1

I can't seem to find a case where the first code snippet doesn't work. I've tried both appending a new option and setting an existing option's value with jQuery's val() function. In both cases, the first code snippet still worked. In what case would it fail? – dallin Aug 05 '15 at 03:50
Just wanted to point out in the first example you are missing the quotes for the value. `option[value"'+thevalue+'"]'` – Charles Driver Jr. Dec 30 '16 at 17:24

score 18 · Answer 2 · answered Aug 30 '12 at 13:55

18

Just in case you (or someone else) could be interested in doing it without jQuery:

var exists = false;
for(var i = 0, opts = document.getElementById('select-box').options; i < opts.length; ++i)
   if( opts[i].value === 'bar' )
   {
      exists = true; 
      break;
   }

answered Aug 30 '12 at 13:55

Marco Demaio

33,578
33
128
159

Why not just i++? – csr-nontol Jan 02 '20 at 00:25
1

++i prefix is always faster then postfix @csr-nontol – Alok Aug 09 '20 at 17:39

score 18 · Answer 3 · answered Apr 03 '13 at 17:13

18

Here is another similar option. In my case, I'm checking values in another box as I build a select list. I kept running into undefined values when I would compare, so I set my check this way:

if ( $("#select-box option[value='" + thevalue + "']").val() === undefined) { //do stuff }

I've no idea if this approach is more expensive.

answered Apr 03 '13 at 17:13

cam_pdx

197
2
8

Most readable and straight forward solution imo – Vivek Kumar Feb 06 '23 at 12:40

score 11 · Answer 4 · answered Nov 30 '15 at 12:07

Why not use a filter?

var thevalue = 'foo';    
var exists = $('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length;

Loose comparisons work because exists > 0 is true, exists == 0 is false, so you can just use

if(exists){
    // it is in the dropdown
}

Or combine it:

if($('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length){
    // found
}

Or where each select dropdown has the select-boxes class this will give you a jquery object of the select(s) which contain the value:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();

This is imho the most intuitive way. – Simon Jul 20 '16 at 13:43 — Simon, Jul 20 '16 at 13:43

score 7 · Answer 5 · edited Sep 24 '16 at 22:36

7

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}

edited Sep 24 '16 at 22:36

Julian

33,915
22
119
174

answered Sep 23 '16 at 09:23

elaine

117
1
1

In your solution, It is not `theValue` but the `option_number` in dropdown. You solution is wrong. – Arsman Ahmad May 03 '18 at 10:41

score 1 · Answer 6 · edited Jun 08 '19 at 06:41

I know this is kind of an old question by this one works better.

if(!$('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"] option[value="'+data['item'][i]['id']+'"]')[0]){
  //Doesn't exist, so it isn't a repeat value being added. Go ahead and append.
  $('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"]').append(option);
}

As you can see in this example, I am searching by unique tags data-dropdown name and the value of the selected option. Of course you don't need these for these to work but I included them so that others could see you can search multi values, etc.

score 1 · Answer 7 · answered Dec 09 '20 at 11:25

1

if ($select.find('option[value=' + val + ']').length) {...}

answered Dec 09 '20 at 11:25

Alexey Prokofiev

21
1

1

Welcome on SO. Your answer could be improved: by adding a description of your code. Tell us how it works and how it solves the problem. – Krzysztof Madej Dec 09 '20 at 11:44

score 0 · Answer 8 · answered Feb 03 '21 at 11:47

Having html collection of selects you can check if every select has option with specific value and filter those which don't match condition:

//get select collection:
let selects = $('select')
//reduce if select hasn't at least one option with value 1
.filter(function () { return [...this.children].some(el => el.value == 1) });

Check if value is in select list with JQuery

8 Answers8

Linked