如何選擇特定選項？

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>