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

Contents

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>

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.

select2 example – Dynamic option creation

Select2 dropdown example

add image in select2 dropdown

select2 replace options

Related posts: