Breaking News: Grepper is joining You.com. Read the official announcement!

select 2 dropdown

Nipun answered on September 1, 2021 Popularity 10/10 Helpfulness 2/10

answer select 2 dropdown

related select2 multiple html option

select 2 dropdown

Comment

$(".js-example-basic-multiple-limit").select2({
  maximumSelectionLength: 2
});

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: select2.org

Tags: dropdown select whatever

Link to this answer
Share Copy Link

Contributed on Sep 01 2021

Nipun

0 Answers Avg Quality 2/10

Closely Related Answers

select2 multiple html option

Comment

// took a day to figure out. Finally did it.
// select2 box with "multiple" "html" options with "remote ajax data" 
// created this as a php file to fetch remote data

<?php 

if (isset($_POST['db_leadsift_params'])) {

	$data = [
		['company_id'=>1, 'company_name'=>'a company', 'industry'=>'a industry'],
		['company_id'=>2, 'company_name'=>'b company', 'industry'=>'b industry'],
		['company_id'=>3, 'company_name'=>'c company', 'industry'=>'c industry'],
	];

	echo json_encode($data);
	exit();
}

?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<select id="db_filter_company_name" data-param_type="company_name" style="width: 700px">
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  
$(document).ready(function() {
  
 $('#db_filter_company_name').select2({
      closeOnSelect : false,
      multiple: true,
      allowHtml: true,
      allowClear: true,
      placeholder: 'Company Name',
      templateResult: select2formatCustom, //add html to options
      escapeMarkup: function(markup) { //to actually show custom html
        return markup;
      },
      templateSelection: function(data) { //shows value after selection inside select input box
        return data.text1;
      },
      ajax: {
          url: "",
          dataType: 'json',
          type: "POST",
          quietMillis: 2000,
          data: function (term) {
              return {
                  term: term,
                  db_leadsift_params: 1,
              };
          },
          processResults: function (data) {
              return {
                  results: $.map(data, function(obj) {
                      return { id: obj.company_id, text1: obj.company_name, text2: obj.industry };
                  })
              };
          }
      }
    });

    function select2formatCustom (state) {
        if (state.loading) return "Searching...";
        return '<div>'
        	+'<input type="checkbox" class="select2_my_checkbox" id="select2_my_checkbox'+state.id+'" data-id="'+state.id+'" />'
        	+state.text1+'</div> <p style="margin:0px">'+state.text2+'</p>';
    };

    //important part
    $(document).on("click",".select2-results__option",function() {
    	var id = $(this).find('.select2_my_checkbox').data('id');
    	if ($(this).hasClass('myactive')) {
    		console.log('uncheck')
            $("#db_filter_company_name option[value="+id+"]").prop("selected", false); //most important
			$("#db_filter_company_name").trigger("change");  //most important
            $("#select2_my_checkbox"+id).prop("checked", false);
            $(this).attr("aria-selected", false);
            $(this).removeClass('myactive');
        } else {
    		console.log('check')
        	$("#db_filter_company_name option[value="+id+"]").prop("selected", true); //most important
        	$("#db_filter_company_name").trigger("change"); //most important
        	$("#select2_my_checkbox"+id).prop("checked", true);
        	$(this).attr("aria-selected", true);
            $(this).addClass('myactive');
        }
    })

});

</script>

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Mar 30 2022

Handsome Horse

0 Answers Avg Quality 2/10

select 2 dropdown

Contents

More Related Answers

select 2 dropdown

Closely Related Answers

select2 multiple html option

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.