javascript - 选择:update not working in $. 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">
	<div class="col-xs-6">
		<div class="input-group">
		<span class="input-group-addon">Current States Distribution</span>
		 <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)">
			<option>Alabama </option>
			<option>Alaska </option>
			<option>Arizona </option>
			<option>Arkansas </option>
			<option>California </option>
			<option>Colorado </option>
			<option>Connecticut </option>
			<option>Delaware </option>
		</select>
		</div>
	</div>
</div>

--Rendered HTML--

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

Answer 1

在您的代码中，您尝试将新数据附加到呈现的 html。而不是将新选项附加到选择并调用 $("#ddlDistributionStates").trigger("chosen:updated"); .

检查此示例代码。在此代码中，我将更新按钮单击时选择的内容。您可以在 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">
	<div class="col-xs-6">
		<div class="input-group">
		<span class="input-group-addon">Current States Distribution</span>
		 <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)">
			<option selected>Alabama </option>
			<option selected>Alaska </option>
			<option selected>Arizona </option>
			<option selected>Arkansas </option>
			<option>California </option>
			<option>Colorado </option>
			<option>Connecticut </option>
			<option>Delaware </option>
		</select>
		</div>
	</div>
</div>