0

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

Improve this question
5
  • .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? Commented Dec 10, 2018 at 18:25
  • use only .val(), it selects the value of the specified element. Commented Dec 10, 2018 at 18:26
  • @j08691 no I'm trying to select the option which have as value 1 and as id-criteria 1 Commented Dec 10, 2018 at 18:27
  • 1
    Possible duplicate of How do you select a particular option in a SELECT element in jQuery? Commented Dec 10, 2018 at 18:27
  • 3
    BTW id-criteria is an invalid HTML5 attribute. Use data-id-criteria instead. Commented Dec 10, 2018 at 18:31

3 Answers 3

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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>

Improve this answer

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.