jQuery Chosen plugin - Dynamically populated list by Ajax of multiple selection

Write blog post regarding jQuery Chosen plugin to get multiple selected dropdown values.

Here I am sharing my experience of jQuery Chosen plugin like get multiple selected value from dropdown.

It was little twiky solution for me at moment and their for I had goggling and found good solution so for reason I was thinking like why I should not share to other.

So here I am going to share one of the issue. Which was worked on drop-down populate data using Ajax call but somehow it was not getting multiple values of selected dropdown.

Now time for demo. How to get multiple Category based on category selection Ajax call trigger and show other list of dropdown of jQuery .

Step by step solution:
Step 1 : Add jQuery and chosen jQuery JS file

Step 2 : Call dropdown initialize functions (i.e for Chosen)

Step 3 : HTML for dropdown.you must need to add name as array category[] and add multiple attribute in select element.

 Div of #show_location currently I set as display:none I want to visible state only when selected value of category have product of experience.

                        What are they interested in
                        Sports
   Fashion
   Electronics
   Experiences
   Health &  Beauty
   Home & Garden
   Entertainment
   Babies
   Toys
   Alchohol
   Gift Vouchers
  
            


      Location
    
    VIC
    
    NSW
    
    QLD
    
    WA
    
    SA
    
    TAS
    
    NT
    
    ACT
        
            

Step 4 : Ajax call for get if any product exists for category and show dropdown of state using jQuery show method.

$(document).ready(function(){
 
 jQuery("#category").chosen().change(function(){
 
 categorytext = jQuery(this).find("option:selected").text();   
 categoryval = jQuery(this).find("option:selected").val();   
 
 var options = jQuery("#category option:selected");

 var values = jQuery.map(options, function (option) {
 
  return option.value; //option.text;
 });   
  jQuery.ajax({
    type: "POST",
    url: "home/getexperience",
    data: 'cat_id='+values,
    success: function(data) {
   if(data == 'Experiences'){
    jQuery("#show_location").show();
    }else{
     jQuery("#show_location").hide();
    }
    
   
     },
   error: function(data) {
    jQuery(".f_error").html(data).focus();
   }
  });
    });
 
});