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();

Answer 1

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.