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

`.val()` updates the value property and that element's value is already 1. Are you trying to change the value of the `id-criteria` attribute that you created instead? — j08691, Dec 10 '18 at 18:25
use only `.val()`, it selects the value of the specified element. — vrintle, Dec 10 '18 at 18:26
@j08691 no I'm trying to select the option which have as value 1 and as id-criteria 1 — LazyStuff, Dec 10 '18 at 18:27
Possible duplicate of [How do you select a particular option in a SELECT element in jQuery?](https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery) — A. Meshu, Dec 10 '18 at 18:27
BTW `id-criteria` is an **invalid HTML5 attribute**. Use `data-id-criteria` instead. — Roko C. Buljan, Dec 10 '18 at 18:31

score 2 · Accepted Answer · answered Dec 10 '18 at 18:30

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>

score 1 · Answer 2 · answered Dec 10 '18 at 18:29

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>

Tyler Roper · Answer 3 · 2018-12-10T18:43:54.017

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>

How to select specific option?

3 Answers3