Question

我会尽量保持清醒。我的问题是，选择根本没有更新我的下拉列表。我没有遇到它正常工作的问题。问题出在我的$ .ajax成功调用中我将数据从数据库中提取到更新以重新填充选定项目的Chosen下拉列表。我的第一个屏幕截图显示数据确实返回并填充下拉列表，但是在第一个和第二个图像显示它没有正确执行，因为所选：更新无法正常工作，基于我此时的理解。 / p>

我将代码和呈现的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>

已选择：更新无效$ .ajax成功通话

1 个答案: