In this tutorial, learn how to get select2 multi-select value in array format and add in hidden input field on option select using jQuery.
Below is the simple example that contains multi-select select2 dropdown and a hidden input field. It uses jQuery to get the dropdown value in array format and add it as the value of the hidden input field.
Test it Live
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!-- Select2 CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <!-- jQuery (required by Select2) --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Select2 JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <select id="mySelect" multiple="multiple" style="width: 300px;"> <option value="apple" data-designation="my designation 1" data-countrycode= "+91" data-mobile="1234567891" data-email="[email protected]">Apple</option> <option value="banana" data-designation="my designation 2" data-countrycode= "+91" data-mobile="1234567892" data-email="[email protected]">Banana</option> <option value="cherry" data-designation="my designation 3" data-countrycode= "+91" data-mobile="1234567893" data-email="[email protected]">Cherry</option> <option value="date" data-designation="my designation 4" data-countrycode= "+91" data-mobile="1234567894" data-email="[email protected]">Date</option> </select> <input type="hidden" value="" name="customer_kind_attention_data_hidden" id="customer_kind_attention_data_hidden"> <script> let selectionOrder = []; const $select = $('#mySelect').select2(); $select.on('select2:select', function (e) { const val = e.params.data.id; // Add to order if not already selected if (!selectionOrder.includes(val)) { selectionOrder.push(val); forceSelectionOrder(); updateHiddenInput(); } }); $select.on('select2:unselect', function (e) { const val = e.params.data.id; // Remove from order selectionOrder = selectionOrder.filter(item => item !== val); forceSelectionOrder(); updateHiddenInput(); }); function forceSelectionOrder() { // Get the Select2 container const $container = $select.next('.select2-container'); // Find the selection area const $selection = $container.find('.select2-selection--multiple'); // Remove all existing selection choices $selection.find('.select2-selection__choice').remove(); // Add them back in our desired order selectionOrder.forEach(value => { // Find the option text const text = $select.find(option[value="${value}"]).text(); // Create the choice element const $choice = $(` <li class="select2-selection__choice" title="${text}"> <span class="select2-selection_choice_remove" role="presentation">×</span> ${text} </li> `); // Add click handler for removal $choice.find('.select2-selection_choice_remove').on('click', function() { $select.val($select.val().filter(item => item !== value)).trigger('change'); }); // Append to selection $selection.find('.select2-selection__rendered').append($choice); }); } function updateHiddenInput() { const selectedData = selectionOrder.map(value => { const $option = $select.find(option[value="${value}"]); return { value: value, text: $option.text(), designation: $option.data('designation'), countrycode: $option.data('countrycode'), mobile: $option.data('mobile'), email: $option.data('email') }; }); // Store the array as JSON in the hidden input $('#customer_kind_attention_data_hidden').val(JSON.stringify(selectedData)); } </script> |
It’s useful for developers when you are using this select2 multi-select dropdown and get its value dynamically. In each option click, you can store the values with attributes in the input field. After tat, you can use PHP to get the value and store in the database for further use.