how to make multiple selection in dropdown ( chosen select ) with select2 and ajax


Share on Facebook Twitter

6 month ago -   June 19, 2019

select2,select 2 example,select2 options,select2 cdn

so as a PHP developer when I was develop an e-commerce site cbybazar.com then in back-end cms I have needs to link the product with multiple categories as well as with respective multiple subcategories and respective multiple subcategory child as shown in the motion image.

for this most effective solution, i have found on the internet is a select2 dropdown library but the problem is how to implement it with  my project but good thing is that after playing with the select2 library I got the solution which I have shared with this blog


chosen is very helpful when we want to link a product with multiple category and multiple subcategories so in this blog we learn how to develop Ajax-based dropdown select with multiple chosen. let's see select 2 example in the demo ie we are going to learn......



                           click on demo button to see      Demo




the source code of this select 2 example you can download  from the given below link. further, I have explained this code step by step



        click on download button select-2-chosen-error-solved.zip(size-40kb)      download



select2 options verity of dropdown chosen like select2 autocomplete, with disabling option, searchable option, Hierarchical options and more. if you want 
more type who beyond of this select 2 example, go to its official website select2.org/options

here is our index.php  our main HTML part is 

<div class="col-md-9 col-sm-9">
      <form class="form-horizontal" action="" method="get">
         
   	  <input type="hidden" class="form-control input_pseudo_keyword"   name="input_pseudo_keyword">
         <input type="hidden" class="form-control input_pseudo_cateory"   name="input_pseudo_cateory">
     
<!---a first select choosen tag with class name "input_category"---->
<div class="form-group"> <label class="control-label col-sm-3" for="pwd">Blog category:</label> <div class="col-sm-9 select_loader"> <select id="select_category" data-placeholder="Enter Search Keyword" class="form-control js-example-tokenizer input-sm input_cateory" multiple="multiple"> <option>orange</option> <option>white</option> <option>purple</option> </select> </div> </div> <!---a second select choosen tag with class name "input_keyword"---->
<div class="form-group"> <label class="control-label col-sm-3" for="pwd"> Blog Search keyword:</label> <div class="col-sm-9"> <select data-placeholder="Select Blog Category" name="input_keyword" class="chosen-select form-control show_blog_keyword input_keyword" multiple tabindex="6"> <option value="select">select</option> </select> </div> </div> <!---after page submission name attribute of select tag name attribte is not found so we have get this value and asign it to a pseudo input which succesfully get after page submit--> <div class="col-sm-offset-11 col-sm-10"> <input type="submit" class="btn btn-primery btn-sm post_k" value="POST" onclick=" $('.input_pseudo_keyword').val($('.input_keyword').val());$('.input_pseudo_cateory').val($('.input_cateory').val());"> </div> </div> </form> </div>
the first dropdown is class with js-example-tokenizer on this class chosen select2 is applied
<select id="select_category" data-placeholder="Enter Search Keyword" class="form-control js-example-tokenizer input-sm input_cateory" multiple="multiple">
            <option>orange</option>
            <option>white</option>
            <option>purple</option>
            </select>
for appearing as multiple chosen on this class following code we use in the script file

$(".js-example-tokenizer").select2({
   tags: true,
   });

next dropdown select class is  show_blog_keyword ,on this multiple chosen has appeared. but dropdown is loaded when ajax is call by the on the change  value of first dropdown select ( .input_category

<div class="col-sm-9">   
      
      <select data-placeholder="Select Blog Category" name="input_keyword" class="chosen-select form-control show_blog_keyword  input_keyword" multiple tabindex="6">  
           <option value="select">select</option>
           
         </select>
in the script for every change of chosen category, we send an ajax request and finally, the result is shown in select tag whose class  show_blog_keyword  

 $('#select_category').on('change', function() {
    var select_category=$(this).val();
    //  note select_category is pass a array of all selected category so to get its value we have to explode this in select_ajax page
	//alert(select_category);
   
   $.post("select_ajax.php",{select_category_j:select_category},function(data){
		
	$('.show_blog_keyword').html(data);
	$(".show_blog_keyword").chosen();
	$(".show_blog_keyword").trigger("chosen:updated");
   
   }); });
here $(".show_blog_keyword").trigger("chosen:updated"); here must be use for update dropdown in the select 




Get result after post the form 

when chosen is apply then due to some javascript  code it names attribute is become undefine so we use pseudo input to get its data after the form is submitted

 <input type="hidden" class="form-control input_pseudo_keyword"   name="input_pseudo_keyword">
 <input type="hidden" class="form-control input_pseudo_cateory"   name="input_pseudo_cateory">

then  in the  form submit button onclick we have to use the following javascript code

<!---after page submission name attribute of select tag name attribte  is not found so we have get this value and asign it to a pseudo input which succesfully get after page submit-->
    
     <div class="col-sm-offset-11 col-sm-10">
       <input type="submit" class="btn btn-primery btn-sm post_k"  value="POST" onclick=" $('.input_pseudo_keyword').val($('.input_keyword').val());$('.input_pseudo_cateory').val($('.input_cateory').val());">
     </div>

finally, when the form is submitted we got the result

<!---after page submission-->
		  <br><br><br><br><br>
		   
 <div class="row"  style="background-color:gray;color:white">
		   
 <h3> &nbsp; &nbsp; &nbsp; &nbsp;result will show after submit the form</h3>
 <br><br><br>
 <h4>
  <label class="control-label col-sm-3" for="pwd">Blog  category:</label>
   
   <?php  
	  if(isset($_GET['input_pseudo_cateory'])){ echo $input_shuedo_c= $_GET['input_pseudo_cateory'];}
	 ?>
	 
   <br> <br> <br> <br> <br>
	 <label class="control-label col-sm-3" >Blog Search keyword:
    
     <?php
if(isset($_GET['input_pseudo_cateory'])){ echo $input_keyword= $_GET['input_pseudo_keyword'];} ?> <h4></div>



 thanks, I hope it will help you 

 if you have any a query please ask in the comment

Whats new

how to make multiple selection in dropdown ( chosen select ) with select2 and ajax

6 month ago by techifind


how to make hand drawing effect for custom image in videoscribe using illustrator

1 years ago by techifind


how to remove noise from voice using fl studio

1 years ago by techifind

Subscribe to this blog and receive notifications of new posts by email.