How to select specific option?

Question

Suppose I have a select with these options:

 <select class="criteria">
   <option id-criteria="1" value="1"></option>
   <option id-criteria="2" value="1"></option>
 </select>

I want select the value of the option with id-criteria equal to 1 , so I tried:

$('.criteria').find('option[id-criteria="1"]').val(1);

but this not works

Answer 1

If you want to select the option with value of 1 use

$('.criteria').val('1');

if you have multiple .criteria and you want it to apply only when the id-criteria="1" then use

$('.criteria').find('option[id-criteria="1"][value="1"]').prop('selected', true);

---

demo

 $('.criteria').find('option[id-criteria="1"][value="1"]').prop('selected', true); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <select class="criteria"> <option>select an option</option> <option id-criteria="1" value="1">option 1</option> <option id-criteria="2" value="1">option 2</option> </select> 

Answer 2

If you're looking to select the option with an id-criteria value of 1 and a value property of 1, you can use the same attribute selector syntax that you're using now, but add in the value:

$('.criteria').find('option[id-criteria="1"][value="1"]')

 $('.criteria').find('option[id-criteria="1"][value="1"]').remove(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option id-criteria="1" value="1"></option> <option id-criteria="2" value="1"></option> </select> 

Answer 3

If I'm understanding, you have two options with the same value. You want to select specifically the one with id-criteria=1 and value=1 .

 $('.criteria') .children() //Get all options .removeAttr("selected") //Remove their 'selected' attribute .end() //Refer back to <select> .children('option[id-criteria="1"][value="1"]') //Find option .attr("selected",true); //Select it 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option selected>Example</option> <option>Another Example</option> <option id-criteria="1" value="1">Criteria: 1, Value: 1</option> <option id-criteria="2" value="1">Criteria: 2, Value: 1</option> </select> 

For anyone curious as to why I've chosen to deselect the previous values, it's mostly for consistency in attribute-based selections. For example, if you had CSS to style the selected element of this dropdown, not removing the selected attribute would cause multiple elements to appear selected.

 $('.criteria') .children('option[id-criteria="1"][value="1"]') //Find option .attr("selected",true); //Select it 

 option[selected] { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="criteria"> <option selected>Example</option> <option id-criteria="1" value="1">Criteria: 1, Value: 1</option> </select>