<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
HTML
Города
<select class="form-control select2 chosen-select" id="propertyCity" name="propertyCity[]" style="width:90%;" multiple="multiple" data-tags="true">
<optgroup label="Alajuela">
<option value="Alaj_Alajuela">Alajuela</option>
<option value="Alaj_Atenas">Atenas</option>
<option value="Alaj_Grecia">Grecia</option>
<option value="Alaj_La Fortuna">La Fortuna</option>
<option value="Alaj_La Garita">La Garita</option>
<option value="Alaj_La Guacima">La Guacima</option>
<option value="Alaj_Orotina">Orotina</option>
<option value="Alaj_San Carlos">San Carlos</option>
<option value="Alaj_San Ramon">San Ramon</option>
<option value="Alaj_Upala">Upala</option>
</optgroup>
</select>
</div>
SCRIPT
jQuery(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"})
этот код работает в первый раз, но когда я получаю ответ от ajax и заменяю мои выпадающие значения, то выбранный не работает.
Это мой код успеха функции ajax
success: function( response ) {
$(".townsclss").html(response);
$("#propertyCity").addClass("chosen-select");
$("#propertyCity").trigger("chosen:updated");
$(select).trigger("chosen:updated");
}
Ответ приходит в успехе:
<div id="propertyCityReplace">
<label for="propertyCity" style="width:90px;"> City </label><br />
<select class="form-control select2" id="propertyCity" name="propertyCity[]" style="width:90
%;" multiple="multiple" data-tags="true">
<optgroup label='Limón'>
<option value='Lim_Cahuita'>Cahuita</option>
<option value='Lim_Caribbean Coast'>Caribbean Coast</option>
<option value='Lim_Guacimo'>Guacimo</option>
<option value='Lim_Puerto Limon'>Puerto Limon</option>
<option value='Lim_Puerto Viejo'>Puerto Viejo</option></optgroup>
</select>
</div>
Можете ли вы помочь мне, почему выбранный не работал после вызова ajax?
Так как jQuery(".chosen-select").chosen({
… работает только при загрузке страницы. Ajax изменяет элементы DOM, и события исчезают.
У вас есть звонок
jQuery(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"})
после вызова AJAX, сразу после
$("#propertyCity").addClass("chosen-select");
Других решений пока нет …