Multiple Select With Dropdown List – multiselect

8 thoughts on “Multiple Select With Dropdown List – multiselect”

1. sasikumar vediyappan October 29, 2019

   But Not getting the form submitted values, please let me know how about getting the values

   Reply ↓
2. rok April 8, 2020

   yes… please how to get selected values from this dropdown to insert it in mysql trought php??
   thank you

   Reply ↓
3. incrediblethought1 August 27, 2020

   You really need to tell the way to get values … Its useful but still incomplete without values.

   Reply ↓
   1. Graham Holmes October 11, 2020

      If it helps … in PHP, in the select tag, put

      name=multi[], id=multi

      The square bracket allows for multiple values to be fed back as an array in the $_POST[‘multi’] system variable. I’m guessing that other languages will be similar.

      Reply ↓
4. code-tester January 6, 2021

   First Line in your JS is “var $ = { …”
   that overrides jquery and so in many cases it’s not useable (bootstrap needs jquery and so on …)

   Reply ↓
5. David Clifford August 3, 2021

   on my page i needed to integrate multiple multi-select instances,
   this is what I ended up writing to get the selections into
   my submitted form.

   example will use myDrop1,myDrop2,myDrop3 as the multiselect objects.
   for each drop you need to create a hidden input field

   so for myDrop1
   ill make

   lets say my values are numbers and my display for those numbers is the string version of the number.
   IE:
   One
   Two
   Three
   Four

   Then you will have to run the function PrepMultiSelectBeforeSubmit() as part of your submit validation process.

   function PrepMultiSelectBeforeSubmit(numDropObjects)
   {
   for (i = 1; i <= numDropObjects; i++){
   const selectedItems = [];
   for (var index in window['myDrop'+ i].options){
   if(window['myDrop'+ i].options[index].state == 'hide' || window['myDrop'+ i].options[index].state == 'remove'){
   //Four
   // want ^ or ^^^^ ?
   // if you want to submit ‘4’ use-> window[‘myDrop’+ i].options[index].value
   // if you want to submit Four use-> window[‘myDrop’+ i].options[index].html
   selectedItems.push(window[‘myDrop’+ i].options[index].value);
   }
   }
   document.getElementById(‘submittedDrop-‘ + i).value=selectedItems.join();
   }
   }

   Reply ↓
6. Jannis November 21, 2021

   Hi,

   just extend the following functions to select the options in the hidden select-tag:

   addOption: function(e, element){
   var index = Number(element.dataset.index);
   this.clearStates()
   this.selected.push({
   index: Number(index),
   state: ‘add’,
   removed: false
   })
   this.html.select.options[index].selected = 1; // extend this line
   this.options[index].state = ‘remove’;
   this.render()
   },
   removeOption: function(e, element){
   e.stopPropagation();
   this.clearStates()
   var index = Number(element.dataset.index);
   this.selected.forEach(function(select){
   if(select.index == index && !select.removed){
   select.removed = true
   select.state = ‘remove’
   }
   })
   this.html.select.options[index].selected = 0; // extend this line
   this.options[index].state = ‘add’
   this.render();
   },

   Reply ↓
7. Python Developer December 13, 2021

   @Author how am I supposed to implement this solution for more than 1 multi-select inputs?

   Reply ↓