选择了jquery，以进行更新 <option>领域

Question

Have 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>

My optionsget content by 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")
})

What am I doing wrong? My options don't update after getting ajax-data. What and where need I to write? chosen_v1.2.0.

Answer 1

I don't know how chosen works but it needs to be triggered in the success callback. In your code, you're doing it way before the ajax response is available.

$(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

I've got it. I just apply a chosen() method in success, after section filling.

$("#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!"});
        }
    });
})