在 Javascript/jQuery 中选择（触发更改）选择下拉列表的动态添加选项答案

【问题标题】：Select (trigger change) the dynamically added option of a select dropdown in Javascript/jQuery在 Javascript/jQuery 中选择（触发更改）选择下拉列表的动态添加选项
【发布时间】：2016-03-14 05:28:25
【问题描述】：

我的网页中有一个选择下拉菜单，动态创建为

<select id="mainDropDown" class="Field">
   <option data-id="-1">Select your option</option>
</select>

当另一个事件（按钮点击）发生时，我动态填充它

$('body').on("click", "#addOption", function () {
        createOption();
        $('#mainDropDown').val($("#newOption").val()).trigger('change');
        $("#newOption").val("")
});

function createOption() 
{ 
  for (var k in OptionList) {   // OptionList has the list of options already added to the dropdown
     tempSelectedState = "";
     if ($("#newOption").val() == OptionList[k].name) {
        tempSelectedState = "selected";
     }
     $("#mainDropDown").append("<option data-id='" + OptionList[k].ID + "' " + tempSelectedState + ">" + OptionList[k].name + "</option>");
     //$('body #mainDropDown').val().trigger('change');
  }
}

这里的问题是选择更改事件没有被调用。

$('#mainDropDown').change(function () {
//.................
}

我试图在

上明确地调用它

$('#mainDropDown').val($("#newOption").val()).trigger('change');

但是当它被调用时，mainDropDown 的动态添加选项尚未填充，因此无法访问。

实际需要的功能是添加新选项时，必须默认选中，并且必须成功触发值更改事件。

【问题讨论】：

您能在控制台中发现任何错误吗？ $ 加载了吗？你在等待DOM 准备好了吗？
我认为你做不到 $("#newOption").val()
@progrAmmar，你可以！ jsfiddle.net/rayon_1990/j7dcL1ex
在调用trigger('change')之前是否添加了更改处理程序
@RayonDabre 哦，我明白了，我想也许他忘了添加一个名为 newOption 的隐藏字段

标签： javascript jquery html

【解决方案1】：

创建的新选项的添加是一个回调，因此只有在触发更改事件后才会填充选择。

因此，只有在填充选项后才能删除回调并触发更改。

This example 正在按预期工作

【讨论】：