選擇（觸發更改）Javascript/jQuery 中選擇下拉列表的動態添加選項

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

創建的新選項的添加是一個回調，因此只有在觸發更改事件后才會填充選擇。

因此，只有在填充選項后才刪除回調並觸發更改。

This example按預期工作