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

html multiple select tag

Add Answer

Shehroz Ali answered on March 25, 2021 Popularity 10/10 Helpfulness 1/10

answer html multiple select tag

related select2 multiple html option

related html select multiple

html multiple select tag

Comment

npm i react-multiple-select-dropdown-lite

Popularity 10/10 Helpfulness 1/10 Language html

Source: www.npmjs.com

Tags: html multiple-select

Link to this answer
Share Copy Link

Contributed on Nov 30 2022

Shehroz Ali

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

html select multiple

Comment

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})

Popularity 10/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Mar 25 2021

Ugliest Unicorn

0 Answers Avg Quality 2/10

html multiple select tag

Contents

More Related Answers

html multiple select tag

Closely Related Answers

select2 multiple html option

html select multiple

Grepper

Documentation

Social

Legal

Contact

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