Question

我的网页中有一个动态创建的选择下拉列表

<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的动态添加选项尚未填充，因此无法访问。

所需的实际功能是添加新选项时，默认情况下必须选中它，同时必须成功触发值更改事件。

Answer 1

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

因此，只有在填充选项

后才能删除回调并触发更改

jsfiddle.net/Keertheee/70xgkscg/3按预期工作

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

1 个答案: