Question

<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电话后没有工作吗？

Answer 1

因为jQuery(".chosen-select").chosen({ ...仅在页面加载时运行。 ajax改变了DOM元素，事件也消失了。

你有电话

jQuery(".chosen-select").chosen({
    no_results_text: "Oops, nothing found!"
})

在ajax调用之后

，

之后

$("#propertyCity").addClass("chosen-select");

ajax调用后选择不起作用

1 个答案: