を選択しました。$ .ajax成功の呼び出しで更新が動作しません。

Question

私はできるだけ明確にしようとします。私の問題は、Chosenが私のドロップダウンを全く更新していないことです。私は正しく動作している問題はありません。問題は私の$ .ajax成功の呼び出しの中にあります。データベースからデータを取り込んで、以前選択した項目でChosenドロップダウンメニューを再投入します。私の最初のスクリーンショットは、データが戻ってきてドロップダウンにデータが入ることを示していますが、最初の画像と2番目の画像では、選択されたため正しく表示されません。

私はあなたのレビューのためにコードとレンダリングされたHTMLを含めています。あなたが提供できる洞察力および/または援助が最も高く評価されます。あなたのコードで

--js-- 
 

 
$('#ddlDistributionStates').chosen(); 
 

 
$.ajax... 
 
success: function (data) { 
 

 
$(data).each(function (index, item) { 
 
    var ds = item.DistributionStates.split(","); 
 
    $.each(ds, function (i, p) { 
 
     $("#ddlDistributionStates_chosen ul").prepend('<li class="search-choice"><span>' + p + '</span><a  class="search-choice-close" data-option-array-index="' + i + '"></a></li>'); 
 
     }); 
 

 
     $("#ddlDistributionStates").trigger("chosen:updated"); 
 
    } 
 
}

--HTML-- 
 

 
<div class="row top-buffer"> 
 
\t <div class="col-xs-6"> 
 
\t \t <div class="input-group"> 
 
\t \t <span class="input-group-addon">Current States Distribution</span> 
 
\t \t <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)"> 
 
\t \t \t <option>Alabama </option> 
 
\t \t \t <option>Alaska </option> 
 
\t \t \t <option>Arizona </option> 
 
\t \t \t <option>Arkansas </option> 
 
\t \t \t <option>California </option> 
 
\t \t \t <option>Colorado </option> 
 
\t \t \t <option>Connecticut </option> 
 
\t \t \t <option>Delaware </option> 
 
\t \t </select> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
--Rendered HTML-- 
 

 
<div class="col-xs-6"> 
 
\t <div class="input-group"> 
 
\t \t <span class="input-group-addon">Current States Distribution</span> 
 
\t \t <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)" style="display: none;"> 
 
\t \t \t <option>Alabama </option> 
 
\t \t \t <option>Alaska </option> 
 
\t \t \t <option>Arizona </option> 
 
\t \t \t <option>Arkansas </option> 
 
\t \t \t <option>California </option> 
 
\t \t \t <option>Colorado </option> 
 
\t \t \t <option>Connecticut </option> 
 
\t \t \t <option>Delaware </option> 
 
\t \t </select> 
 
\t \t <div class="chosen-container chosen-container-multi chosen-with-drop chosen-container-active" style="width: 364px;" title="" id="ddlDistributionStates_chosen"> 
 
\t \t \t <ul class="chosen-choices"> 
 
\t \t \t \t <li class="search-choice"><span>Arkansas</span><a class="search-choice-close" data-option-array-index="1"></a></li> 
 
\t \t \t \t <li class="search-choice"><span>Alaska</span><a class="search-choice-close" data-option-array-index="0"></a></li> 
 
\t \t \t \t <li class="search-field"><input type="text" value="Select State(s)" class="default valid" autocomplete="off" style="width: 118px;" aria-invalid="false"></li> 
 
\t \t \t </ul> 
 
\t \t \t <div class="chosen-drop"> 
 
\t \t \t \t \t <ul class="chosen-results"><li class="active-result" data-option-array-index="0">Alabama </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="1">Alaska </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="2">Arizona </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="3">Arkansas </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="4">California </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="5">Colorado </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="6">Connecticut </li> 
 
\t \t \t \t \t <li class="active-result" data-option-array-index="7">Delaware </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

あなたが選択するための新しいオプションを追加して$("#ddlDistributionStates").trigger("chosen:updated");を呼び出すことのレンダリングhtml.Insteadに新しいデータを追加しようとしています。

チェック私はclick.Youは、AJAX呼び出し、この `$の代わりに

$(function(){ 
 

 
$('#ddlDistributionStates').chosen(); 
 

 
$('#updateSelect').click(function(){ 
 
    $('#ddlDistributionStates option').remove(); 
 
    
 
    var html =''; 
 
    for(var i=0; i<= 10;i++){  
 
    html += "<option value='"+i+"' selected>"+i+"</option>"; 
 
    } 
 
    
 
    $('#ddlDistributionStates').append($(html)); 
 
     
 
    $("#ddlDistributionStates").trigger("chosen:updated"); 
 
    
 
    }) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet"/> 
 
    
 
<button id="updateSelect">Click to update select</button> 
 
<div class="row top-buffer"> 
 
\t <div class="col-xs-6"> 
 
\t \t <div class="input-group"> 
 
\t \t <span class="input-group-addon">Current States Distribution</span> 
 
\t \t <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)"> 
 
\t \t \t <option selected>Alabama </option> 
 
\t \t \t <option selected>Alaska </option> 
 
\t \t \t <option selected>Arizona </option> 
 
\t \t \t <option selected>Arkansas </option> 
 
\t \t \t <option>California </option> 
 
\t \t \t <option>Colorado </option> 
 
\t \t \t <option>Connecticut </option> 
 
\t \t \t <option>Delaware </option> 
 
\t \t </select> 
 
\t \t </div> 
 
\t </div> 
 
</div>