select2 - make array of selected options text where key is option value

Question

Using latest select2 with multiple options. When user selects any option, I need to make arrays of selected option values and texts. To get value, I use:

var id=$('#select2_dropdown').val();

It makes arrays like id[]="value1", id[]="value2", etc.

Now I need to make the same array for text between <option> tags. Found a solution at Get selected text from a drop-down list (select box) using jQuery so added this code:

var name=$("#select2_dropdown option:selected").text();

While it works great for single select, trying to use it with multiple select just makes a string like name=optiontext1optiontext2 (strings of all selected options combined into one)

How can I make it to look this: name[value1]=optiontext1, name[value2]=optiontext2 ?

Tried this without any luck:

var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();

Can I ask why you need the option text? Generally speaking you could be opening up to a vulnerability to trust what ever is passed back in the text values. — Adam Carr
I'm submitting this data via ajax to another PHP file, which does some validations/calculations, formats new data and returns it back to the original script. This new data then is used to dynamically create new input fields, write some text, etc — Mindaugas Li
Just be aware that someone could alter the values of the text, so if you are using them for anything critical then it could lead to issues if any of the data is sensitive or security critical. — Adam Carr
Also would you be able to use a JSON string to pass the data across? — Adam Carr
I also have option texts in database, so I can look up them too — Mindaugas Li

Adam Carr Adam Carr · Accepted Answer · 2017-06-01T20:04:29

You can do a jQuery.each on the select2.

$("#select2_dropdown option:selected").each(function(){

  var option = $(this);

  var label = option.text();
  var value = option.value();

});

You can just push those values into an object and then format the data as you see fit.

$('.select2').select2({ placeholder: 'Please choose one.'});

$('#stringify').on('click',function(){
	
  var result = { };
	$('#feeling :selected').each(function() { var o = $(this); result[o.text()]=o.val() });
  
  $('#output').text(JSON.stringify(result));

});

.select2 {
  min-width:200px;
}

.output {
  margin-top: 25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>


<label for='feeling'>How are you feeling?</label>
<select multiple='multiple' id='feeling' class='select2'>
  <option value="1">Awake</option> 
  <option value="2">Tired</option> 
  <option value="3">Happy</option> 
  <option value="4">Sad</option> 
  <option value="5">Hungry</option> 
  <option value="6">Tearful</option> 
</select>

<button class='btn btn-primary' id="stringify">
  To JSON.
</button>

<div class='output well'>
  <span id='output'>
  </span>
</div>

Sample which shows how to do this to an object and then turn that into a JSON string.

select2 - make array of selected options text where key is option value

1 Answers