如何选择特定选项？

Question

假设我可以选择以下选项：

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

我想选择id-criteria等于1的选项的值，所以我尝试了：

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

但这不起作用

Answer 1

如果要选择值为1的选项，请使用

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

如果您有多个.criteria并且希望仅在id-criteria="1"应用，

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

---

演示

 $('.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

如果要选择id-criteria值为1且value属性为1的选项，则可以使用与现在使用的相同的属性选择器语法，但要添加以下值：

$('.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

据我了解，您有两个具有相同值的选项。 您要专门选择id-criteria=1和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> 

对于谁对为什么我选择取消选择先前的值感到好奇的人，主要是为了保持基于属性的选择的一致性。 例如，如果您有CSS为该下拉菜单的选定元素设置样式，则不删除selected属性将导致多个元素显示为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>