jQuery - Ajax is not proper working in Chosen ?

[reniraj]

I have two dropdown fields. First one contains country and second one contains regions inside the country. So what i am trying to do is when selecting countries, i need to load respective regions in the second field via ajax using jquery and PHP.

It worked for me for the first time. Next time i change the country, it does not load regions in the second field. How do i add the second trigger result to my select field, removing the old values. I am using custom select field - chosen.js

All the Select box are run in chosen style on page load. Select box 1 - Country (Initiale load) Select box 2 - Region Select box 3 - City (Feature use)

$(document).ready(function() {
//Jquery CODE
$(".chzn-select").data("placeholder","Select").chosen();
$('#lhs-flr-country').change(function(){
        var c_id=$(this).val();
        var data ={country_id:c_id};
         get_regions(data);
    });
    function get_regions(data)
     {
         $.ajax({  
              type: "POST",
              url: "get_country.php",            //the script to call to get data          
              data: data,                       //you can insert url argumnets here to pass to api.php
              dataType: 'json',                //data format  
              success: function(data)          //on recieve of reply
              {
              /*
              //Result Data Example
              [{"pk_i_id":"781491","fk_c_country_code":"in","s_name":"Andhra Pradesh","b_active":"1"},
                {"pk_i_id":"781492","fk_c_country_code":"in","s_name":"Arunachal Pradesh","b_active":"1"},
                {"pk_i_id":"781493","fk_c_country_code":"in","s_name":"Assam","b_active":"1"},
                {"pk_i_id":"781497","fk_c_country_code":"in","s_name":"Dadra and Nagar Haveli","b_active":"1"},
                {"pk_i_id":"781498","fk_c_country_code":"in","s_name":"Daman and Diu","b_active":"1"},
                {"pk_i_id":"781499","fk_c_country_code":"in","s_name":"Delhi","b_active":"1"},
                {"pk_i_id":"781500","fk_c_country_code":"in","s_name":"Goa","b_active":"1"},
                {"pk_i_id":"781501","fk_c_country_code":"in","s_name":"Gujarat","b_active":"1"}]              
              */
                var length = data.length;
                var result='';
                 if(length > 0) {
                    result = '<option value="">Select a Region</option>';

                    //BOUND FOR EACH REGION
                    $.each( data, function( key, value ) {
                            result += '<option value="' + value.pk_i_id + '">' + value.s_name + '</option>'; 
                    });
                    $("#lhs-flr-region").html(result);
                    $("#lhs-flr-region").data("placeholder","Select").chosen();
                }
                else
                {
                    alert("No Region found.");  
                }
              } 
            });  
     }
});

 //HTML CORE CODE

     Country :
      <select data-placeholder="country" name="country" class="chzn-select" id="lhs-flr-country">
       <option value="IN">INDIA</option>
       <option value="RS">RUSSIA</option>
       <option value="AE">UAE</option>
       <option value="US">USA</option>
       <option value="UK">UK</option>
      <select>
      Region
      <select data-placeholder="region" name="region" class="chzn-select" id="lhs-flr-region">
       <option value=""></option>
      <select>

[stof]

What you should do on success is not re-applyign chosen on $("#lhs-flr-region") (which will do nothing as it is already applied) but trigger the chosen:updated event to make Chosen update itelf. See the documentation

[koenpunt]

Replace

$("#lhs-flr-region").data("placeholder","Select").chosen();

with:

$("#lhs-flr-region").data("placeholder","Select").trigger('chosen:updated');

But next time, ask such questions on StackOverflow as stated in the contributing guide.

[sobelfallcayor]

if the next answer dont work you can try to replace : $("#lhs-flr-region").data("placeholder","Select").trigger('chosen:updated'); by $("#lhs-flr-region").data("placeholder","Select").trigger('liszt:updated');

[stof]

@fallphenix you should rather upgrade from 0.9.x to the uptodate version instead of switching back to the old event name

[sobelfallcayor]

@stof right, i worked with Version 0.9.8 in my old apps. I just look for the way that i done. the last version is v1.1.0 https://github.com/harvesthq/chosen. thanks for advices. @Gitthub is the best