Question

假设我选择了以下选项：

 userB
Press any key to continue . . .

我想选择<select class="criteria"> <option id-criteria="1" value="1"></option> <option id-criteria="2" value="1"></option> </select>等于id-criteria的选项的值，所以我尝试了：

但这不起作用

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属性将导致多个元素显示为选中状态。

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

如何选择特定选项？

3 个答案: