Получить только выбранные с пользовательским индексом

Question

Я использую простые сценарии для заполнения образцов данных во время ручного тестирования моего веб-приложения.В основном однострочные для заполнения текстовых полей.

Но теперь у меня есть случай, когда у меня есть несколько выпадающих списков, и мне нужно заполнить только те, которые пусты (один и тот же класс, всегда разные).Мое текущее решение:

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

Вы можете связать селектор опций, селектор :first-child и селектор :selected.Это вернет все первые выбранные элементы option.Затем перейдите, чтобы выбрать элемент с помощью ближайшего и установить 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>