CODEWITHSUNDEEP
javascriptjquery
LazyStuff
LazyStuff

Reputation: 41

How to select specific option?

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

Upvotes: 0

Views: 95

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

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>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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>

Upvotes: 2

j08691
j08691

Reputation: 207861

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>

Upvotes: 1

Related Questions