select2 example – Jquery Select2 – Select box with search example code

select2 example – Jquery Select2 – Select box with search example code Explain Chosen and Select2 with examples. Select2 is a jQuery-based replacement for select boxes.

select2 example – Dynamic option creation

It supports searching, remote data sets, and pagination of results. Select2 plugin is used to customize HTML select element.

select 2 dropdown

$(".simple-get-classname").select2({
  maximumSelectionLength: 2
});

Select2 dropdown example

index.html

      
    
	
	





  
Select Box with Search Option Jquery Select2.js - Example
  
	  PAKAINFO
	  PAKAINFO ACL
	  PAKAINFO PDF
	  PAKAINFO Helper
	  PAKAINFO API
	  PAKAINFO CRUD
	  PAKAINFO Angural JS Crud
	  C++
  

add image in select2 dropdown

$(".class").select2({
    templateResult: formatcategory,
    templateSelection: formatcategory
});

function formatcategory (fldt) {
    if (!fldt.id) {
        return fldt.text.toUpperCase();
    } 

    var fldtimage = $(fldt.element).attr('data-image'); 
    console.log(fldtimage)
    if(!fldtimage){
       return fldt.text.toUpperCase();
    } else {                    
        var $fldt = $(
           ' ' + fldt.text.toUpperCase() + ''
        );
        return $fldt;
    }
};

select2 replace options

var showDataDropDown = function () {
    var details = [];
    var selectedplayer = $("#players").val();
    $.each(pageData.products[selectedplayer].qty, function (key, value) {
        details.push({
            text: value,
            id: key
        });
    })
    $("#qty").empty().select2({
        data: details
    });
};

$("#players").select2().change(showDataDropDown);
showDataDropDown();

Don’t Miss : Jquery Select2 Ajax Autocomplete Example With Demo In PHP Codeigniter Example

I hope you get an idea about select2 example.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.