選擇：更新不起作用$ .ajax成功緻電

Question

我要儘可能地清楚。我的問題是，Chosen根本沒有更新我的下拉菜單。我沒有正常工作的問題。問題出在我的$ .ajax成功調用中，我將數據從數據庫中提取到更新上，以重新填充之前選擇的項目的選擇下拉菜單。我的第一個屏幕截圖顯示數據確實會回來並填充下拉菜單，但在第一張和第二張圖片中顯示，由於所選內容：更新無法正常工作，所以根據我現在瞭解的情況顯示它沒有正確執行此操作。

我包括代碼和呈現的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

在你的代碼正在嘗試新的數據追加到渲染html.Instead的是追加新的選項，選擇和調用$("#ddlDistributionStates").trigger("chosen:updated");。

入住此示例code.In這個代碼我更新的選擇按鈕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>