Author: | varundewan |
---|---|
Views Total: | 93,214 views |
Official Page: | Go to website |
Last Update: | January 28, 2019 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript multi-select plugin that transforms the normal multi-select element into a user-friendly tags input.
The users are allowed to select multiple options from the dropdown select. Click the ‘X’ button to remove the selected option.
How to use it:
Import the main JavaScript and Stylesheet into the document.
<link rel="stylesheet" href="css/style.css"> <script src="js/index.js"></script>
Attach the plugin to a multi-select element and done.
<select multiple="multiple" id="myMulti"> <option>CSS</option> <option>SCRIPT</option> <option>COM</option> <option>jQuery</option> <option>HTML5</option> </select>
var myDrop = new drop({ selector: '#myMulti' });
Specify an array of preselected options.
var myDrop = new drop({ selector: '#myMulti' preselected: [0, 2] });
But Not getting the form submitted values, please let me know how about getting the values
yes… please how to get selected values from this dropdown to insert it in mysql trought php??
thank you
You really need to tell the way to get values … Its useful but still incomplete without values.
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.
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 …)
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();
}
}
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();
},
@Author how am I supposed to implement this solution for more than 1 multi-select inputs?