Как выбрать динамически созданную опцию с jquery?

Question

Как выбрать динамически создаваемый параметр с помощью jquery?

Я создал динамическое c раскрывающееся меню с jquery. Параметры заполняются массивом «data».

После того, как параметры созданы, я пытаюсь выбрать конкретный параметр c по запросу. В моем примере 'opt2'.

В этом примере все работает хорошо. Но в моем приложении всегда будет выбран первый вариант. Только если я создаю alert() до $("select").val('opt2');, тогда выбирается правильный вариант.

Я думаю, это потому, что параметры выбора созданы динамически, и они не готовы, когда я пытаюсь выбрать его.

const data = ['opt1', 'opt2', 'opt3'];

for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
  $('#maschAusw').append($("<option>").attr('value', data[i]).text(data[i]));
}


$("select").val('opt2');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="maschAusw">
  <option selected disabled value="">Choose...</option>
</select>

Answer 1

Во-первых, ваш селектор не идеален, если у вас есть несколько <select> элементов на странице. Вам лучше использовать #maschAusw.

. Вы должны указать атрибут selected. Вы можете сделать что-то вроде этого:

$("#maschAusw").children('option[value="opt2"]').prop('selected', true);

Вы также должны удалить атрибут selected из текущей выбранной опции, что можно сделать следующим образом:

$("#maschAusw").children('option[value="opt2"]')
               .prop('selected', true)
               .siblings()
               .prop('selected', false);

Пожалуйста, см. рабочий пример ниже:

const data = ['opt1', 'opt2', 'opt3'];

for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
  $('#maschAusw').append($("<option>").attr('value', data[i]).text(data[i]));
}


$("#maschAusw").children('option[value="opt2"]')
               .prop('selected', true)
               .siblings()
               .prop('selected', false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="maschAusw">
  <option selected disabled value="">Choose...</option>
</select>