How to use "tags" with Select2

Question

I have this "Select2" dropdownmenu that populates from ajax and php. script Here, I mean one choice to make, and is passed to the html element. Now I like to use this code with tags. I tried but can't figure out how to extract all the selected values? How to send what is selected?

HTML

//form <input type='hidden' class='col-md-4' id='choose_usr_email' name='choose_usr_email' required> //Snap up whats chosed <input type='text' id='chosen_usr_email' name='chosen_usr_email'> 

Javascript

 $(document).ready(function(){ var chosenUsr = $('#choose_usr_email'); $("#choose_usr_email").select2({ tags: true, placeholder: "Välj användare..", ajax: { url: "time.php", dataType: 'json', //search term data: function (term, page) { return { q: term, // search term page: page }; }, results: function (data, page) { return { results: data}; } } // Ajax Call }); // Select2 // Start Change $(chosenUsr).change(function() { var usrId = $(chosenUsr).select2('data').id; var usrEmail = $(chosenUsr).select2('data').text; var timeNr = $(chosenUsr).select2('data').timenr; var usrfName = $(chosenUsr).select2('data').usrfname; $('#chosen_usr_id').val(usrId); $('#chosen_usr_email').val(usrEmail); $('#chosen_usr_time_nr').val(timeNr); $('#chosen_usr_fname').val(usrfName); }); //Change }); //Document Ready 

Answer 1

With select2 v.4.0 you can use several drop-down menus.

Set the name as choose_usr_email[] so that it creates an array of tags to send.

HTML

 <form action="" id="tagForm"> <select multiple="true" name="choose_usr_email[]" id="choose_usr_email" class="form-control select2"> <!-- if tags are loaded over AJAX, no need for <option> elments --> </select> <!-- more form elements ... --> <button type="submit">Submit</button> </form> 

Script

 $('#choose_usr_email').select2({ tags: true, // automatically creates tag when user hit space or comma: tokenSeparators: [",", " "], ajax: { url: "time.php", dataType: 'json', //search term data: function (term, page) { return { q: term, // search term page: page }; }, results: function (data, page) { return { results: data}; } } }); // handle form submission: $('#tagForm').submit(function(e){ e.preventDefault(); $.ajax({ // PHP file where you send selected values: url : "file.php", // if you want to use $_POST in PHP, uncomment the line below: // type : 'POST', dataType : 'json', // serialize the form: data : $('#tagForm').serialize(), success : function(response){ // handle server response ... } }); }); 

PHP (file where you send the selected values)

 <?php // If 'type' is not specified in AJAX, use $_GET // check if 'choose_usr_email' exists in AJAX request if(isset($_GET['choose_usr_email']){ // if exists, loop through the values: foreach($_GET['choose_usr_email'] as $key => $value){ // do something with each $value (each submitted tag) } } ?> 

Demo

---

For Select2 <v.4.0

$('#choose_usr_email').val(); returns each selected tag identifier (if specified) or text separated by a coma (1,2,3, ...).

 $('#tagForm').submit(function(e){ e.preventDefault(); $.ajax({ // PHP file where you send selected values: url : "file.php", // if you want to use $_POST in PHP, uncomment the line below: // type : 'POST', dataType : 'json', // request data, split input field value by comma: data : { choose_usr_email : $('#choose_usr_email').val().split(',') }, success : function(response){ // handle server response ... } }); }); 

You can then handle the AJAX request in the same way as in the previous PHP example.