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

<html lang="en">
<head>
    <title>Jquery Select2 - Select Box with Search Option - www.pakainfo.com</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>

<body>
<div style="width:520px;margin:0px auto;margin-top:30px;height:500px;">

  <h2>Select Box with Search Option Jquery Select2.js - Example</h2>
  <select class="getarticle" style="width:500px;">
	  <option>PAKAINFO</option>
	  <option>PAKAINFO ACL</option>
	  <option>PAKAINFO PDF</option>
	  <option>PAKAINFO Helper</option>
	  <option>PAKAINFO API</option>
	  <option>PAKAINFO CRUD</option>
	  <option>PAKAINFO Angural JS Crud</option>
	  <option>C++</option>
  </select>
</div>
<script type="text/javascript">
      $(".getarticle").select2();
</script>
</body>
</html>

Free Live Chat for Any Issue

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 = $(
           '<span><img src="' + fldtimage + '" width="80px" /> ' + fldt.text.toUpperCase() + '</span>'
        );
        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.

Rate this post