如何使用jquery选择动态创建的选项？
我已经用jquery创建了一个动态下拉菜单。选项由“数据”数组填充。
创建选项后，我尝试通过查询选择特定的选项。在我的示例中为“ 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>首先，如果<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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句