Question

拥有HTML：

<form id='country'>
<select id="region" name="region" class='chosen'>
   <?=$regions;?>
</select>
<br>
<select id="city" name="city" class='chosen'></select>
<br>
<select id="district" name="district" class='chosen'></select>
<br>
<select id="village" name="village" class='chosen'></select>
</form>

Ajax的我的选项内容：

$(document).ready(function(){

$("#region").on("change", function(){
    $(this).nextAll('select').html('');
    $.ajax({
        type: "POST",
        url: "index.php",
        data: "ter_id="+$(this).val(),
        success:function(_ajax){
            $("#city").html(_ajax);
        }
    });
    $(this).trigger('chosen:updated'); //don't working, as like $("#country").trigger("liszt:updated")
})

我做错了什么？获取ajax数据后，我的选项不会更新。我需要写什么和哪里？ chosen_v1.2.0。

Answer 1

我不知道选择的工作方式，但需要在成功回调中触发。在您的代码中，您可以在ajax响应可用之前执行此操作。

$(document).ready(function(){        
    $("#region").on("change", function(){
        var that = $(this);
        that.nextAll('select').html('');
        $.ajax({
            type: "POST",
            url: "index.php",
            data: "ter_id="+that.val(),
            success:function(_ajax){
                $("#city").html(_ajax);
                that.trigger('chosen:updated'); <<=== HERE
            }
        });
    });
});

Answer 2

我已经知道了。我只是在填充部分后应用选择的（）方法成功。

$("#region").on("change", function(){
    var that = this;
    $(this).nextAll('select').html('').addClass('hidden');
    $.ajax({
        type: "POST",
        url: "index.php",
        data: "ter_id="+$(this).val(),
        success:function(_ajax){
            $("#city").removeClass('hidden').attr('required','required').html(_ajax).chosen({'no_results_text': "Oops, nothing found!"});
        }
    });
})

选择jquery，更新<option>字段</option>

2 个答案: