複数選択リストボックスを使用すると添付されないアイテム

Question

2番目のスクリプトを含まない場合、追加されたアイテムは完全に機能します（リストボックスにチェックボックスが付いた洗練されたリストボックスに表示されます）。アイテムを追加しません。

何らかの理由がありますか？

はJQuery：

$("#ddlistcategory").change(function() { 
     var catItem = $("#ddlistcategory").val(); 

     $("#ddlistaccountitems").empty(); 
     $.ajax({ 
       url: '@Url.Action("GetCategories", "Account")', 
       dataType: "json", 
       type: "Post", 
       data: { "i": catItem }, 
       success: function (data) { 

        $.each(data, function (key, val) { 
         //alert(key + " " + val); 
         $("#ddlistaccountitems").append('<option id="' + key + '">' + val + '</option>'); 
        }) 
       } 
      }); 
     }); 

$('#ddlistaccountitems').multiselect({ 
    includeSelectAllOption: false, 
    allSelectedText: 'No option left ...', 
    enableFiltering: true, 
    filterPlaceholder: 'Search for something...' 
}); 

ビュー：

<div class="form-group form-group-sm"> 
    @Html.Label("Items", new { @class = "control-label" }) 
    @Html.ListBoxFor(x => x.SelectedAccountItems, Model.UserItems, new { @class = "form-control", @id = "ddlistaccountitems", @multiple = "multiple" }) 
</div> 

Answer 1

あなたはオプションで要素を移植され、あなたのAJAXメソッドの外で複数選択呼んでいます。結果として、ajaxが終了する前に初期化されるため、初期化にはまだビルドオプションがありません。

これを修正するには、初期化をsuccessメソッドに移します。これにより、ajaxが完了し、必要なすべてのデータが作成された後に実行されます。

Answer 2

あなたのAjaxコールは非同期で動作します。つまり、オプションが追加される前に.multiselectが実行されます。 .multiselectあなたの実際のselectを隠し、カスタムhtmlに置き換えます。したがって、.multiselectの実行の前にそれを記入する必要があります。 Ajax呼び出しに

async: false 

を追加したり、その成功関数内

$('#ddlistaccountitems').multiselect()

を呼び出します。