仅获取具有自定义索引的选择

Question

我在手动测试 Web 应用程序期间使用简单的脚本来填充示例数据。主要是一行来填充文本框。

但现在我遇到了一个情况，我有多个下拉菜单，我只需要填充那些空的（相同 class，总是不同的）。我目前的解决方案：

$('#btn').click(function (){
  $('select').each(function (index) {
      if($(this).prop('selectedIndex') == 0) {
        $(this).prop('selectedIndex', 2);
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ddl" id="target1">
    <option value="0"></option>
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3">OPTION 3</option>
</select>
<select class="ddl" id="target2">
    <option value="0"></option>
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3" selected="selected">OPTION 3</option>
</select>

<button id="btn" class="btn">Fill empty boxes</button>

我的问题是：jQuery 是否有任何选择器来获取所有选择索引为 0（无选择）的下拉菜单？即 $(".ddl[selectedIndex='0']").doStuff()[不起作用]?

我想像 $(selector).prop('selectedIndex',2) 那样做整件事。

Answer 1

您可以链接选项 selector、:first-child selector 和 :selected selector。这将 return select 编辑的所有第一个选项元素。然后使用 closest 遍历到 select 元素并设置 selectedIndex:

 $('option:first-child:selected').closest('select').prop('selectedIndex', 2);

$('#btn').click(function (){
 $('option:first-child:selected').closest('select').prop('selectedIndex', 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ddl" id="target1">
    <option value="0"></option>
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3">OPTION 3</option>
</select>
<select class="ddl" id="target2">
    <option value="0"></option>
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3" selected="selected">OPTION 3</option>
</select>
<select class="ddl" id="target3">
    <option value="0"></option>
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3">OPTION 3</option>
</select>

<button id="btn" class="btn">Fill empty boxes</button>

仅获取具有自定义索引的选择

Get only selects with custom index

html

jquery

jquery-selectors