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

multiple value selected in select2

Add Answer

Shiny Sheep answered on March 22, 2021 Popularity 10/10 Helpfulness 5/10

answer multiple value selected in select2

related select2 multi select get selected value

related select2 multiple html option

related select2 multiple selected values

multiple value selected in select2

Comment

-1

var selectedValuesTest = ["WY", "AL", "NY"];
$(document).ready(function() {
  $("#e1").select2({
    multiple: true,
  });
  $('#e1').val(selectedValuesTest).trigger('change');
});

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript multiple-value selected

Link to this answer
Share Copy Link

Contributed on Feb 22 2022

Shiny Sheep

0 Answers Avg Quality 2/10

Closely Related Answers

select2 multi select get selected value

Comment

alert("Selected value is: "+$(".leaderMultiSelctdropdown").select2("val"));

alternatively, if you used a regular selectbox as base, you should be able to
use the normal jquery call, too:

alert("Selected value is: "+$(".leaderMultiSelctdropdown").val());

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: get

Link to this answer
Share Copy Link

Contributed on May 17 2021

Lokesh003

0 Answers Avg Quality 2/10

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

select2 multiple selected values

Comment

-1

in_array($value, $array)

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Mar 22 2021

Arrogant Alligator

0 Answers Avg Quality 2/10

multiple value selected in select2

Contents

More Related Answers

multiple value selected in select2

Closely Related Answers

select2 multi select get selected value

select2 multiple html option

select2 multiple selected values

Grepper

Documentation

Social

Legal

Contact

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