Find all id's that are listed in JSON object with jQuery

Question

From an ajax request i get this response

val1,val2,val3

and have a list with id equivalent to them like

<select multiple>
  <option id="val1">val1</option>
  <option id="val4">val4</option>      
  <option id="val5">val5</option>
  <option id="val2">val2</option>
  <option id="val6">val6</option>
  <option id="val1">val3</option>
</select>

how can i give all option ids that are in the ajax response the attr selected? like this:

<select multiple>
  <option id="val1" selected="selected">val1</option>
  <option id="val4">val4</option>      
  <option id="val5">val5</option>
  <option id="val2" selected="selected">val2</option>
  <option id="val6">val6</option>
  <option id="val1" selected="selected">val3</option>
</select>

I hope this is clear! many thanks in advance

you cant do that! there can only be one `selected` `option` in a dropdown. and uve got SO many elements with `id` as `val1`. Thats also not right. You can have only one unique element with a unique id. — krishwader, Jul 02 '13 at 18:02
You should no use `id` attribute for `option` tag. @hungerpain, how about multiselect lists? — YD1m, Jul 02 '13 at 18:05
i dont see a `multiple=multiple` attribute @YD1m .. thats why i said its not possible — krishwader, Jul 02 '13 at 18:06
Summary: 1) use `multiple` attribute for `select` tag, 2) do not use same id for more than one element, 3) do not use id attribute for `option` — YD1m, Jul 02 '13 at 18:10
you are both right the i just forgot the multiple. And the multiple val1 was just some typo and totally not intended. — Frank, Jul 02 '13 at 18:27

Adil · Answer 1 · 2013-07-02T18:09:57.337

Try using filter(), you also need to set the multiple attribute of select to allow multiple selection.

Live Demo

var arr = 'val1,val2,val3'.split(',');
$('select option').filter(function(){
    return arr.indexOf(this.id) != -1;
}).prop('selected', true);

Mulitple attribute of Select.

This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time, Reference.

jQuery filter()

Given a jQuery object that represents a set of DOM elements, the .filter() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; all elements matching the selector will be included in the result.

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You need to do two things :

Change all the id attributes in your option to value. Its not proper to use id in options. And besides, you seem to be using the same id for multiple elements, which is semantically wrong. If val is not used, the text inside option will be taken as value of the option.
```
<select>
  <option value="val1">val1</option>
  <option value="val4">val4</option>      
  <option value="val5">val5</option>
  
</select> 
```

Then, you'll have to use multiple select if you need to choose more than one selected option. Your select must look like this:

<select multiple="multiple">
  <option value="val1">val1</option>
  <option value="val4">val4</option>      
  <option value="val5">val5</option>
  <!-- rest of your options -->
</select>

Now, for your problem, you could just split the data you get from the ajax call into an array and then pass it to jQuery's val. This will save the JS engine a lot of time to search for ids and change the attribute of the options.

//store your ajax response in a variable
var values = 'val1,val2,val3'.split(',');
//assign multiple values to <select>
$("select").val(values);

Demo : http://jsfiddle.net/hungerpain/J7exP/4/

For more info on val, see docs.

Find all id's that are listed in JSON object with jQuery

2 Answers2