Question

我在手动测试Web应用程序时使用简单脚本来填充示例数据。大多数是单行填充文本框。

但是现在我得到了一个案例，我得到了多个下拉列表，我只需要填充那些空的（同一个类，总是不同）。我目前的解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是：是否有任何jQuery选择器可以获得所选的索引为0（没有选择）的所有下拉列表？即$(".ddl[selectedIndex='0']").doStuff() [不起作用]？

我想完成像$(selector).prop('selectedIndex',2)这样的整个事情。

Answer 1

您可以链接选项选择器，:first-child选择器和:selected选择器。这将返回所有选定的第一个选项元素。然后遍历选择元素使用最近并设置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>

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

1 个答案: