There is a multiple choice of requirements, found on the Internet this plugin: MultiSelect
Https://github.com/ehynds/jquery-ui-multiselect-widget
CSDN Blog on the introduction of this plug-in, many children's shoes have asked such a question, how to get the selected value? Really a good question, because I saw the demo when also found the problem, hehe!
Let's talk about this plugin:
Jquery-multiselect is based on the Jquery-ui component system.
So when using it, first have to import Jquery-ui related js and css OH
Characteristics
• Support click Label to implement CheckBox group selection.
• Head options such as Select/Cancel All/off features.
• Support for keyboard selection.
• Supports 5 different event callback functions.
• Displays the selected items as a list, and you can set the maximum display value.
• Easy to change position, gradient speed, scrolling container height, link text, text box default content, etc.
Effect as shown:
code for the effect above:
HTML code:
Copy Code code as follows:
<select id = "SELA" title= "Basic Example" multiple= "multiple" name= "Example-basic" size= "5" >
<option value= "V1" >option 1</option>
<option value= "V2" >option 2</option>
<option value= "V3" >option 3</option>
<option value= "Option4" >option 4</option>
<option value= "Option5" >option 5</option>
<option value= "Option6" >option 6</option>
<option value= "option7" >option 7</option>
<option value= "Option8" >option 8</option>
<option value= "Option9" >option 9</option>
<option value= "Option10" >option 10</option>
<option value= "Option11" >option 11</option>
<option value= "Option12" >option 12</option>
</select>
to invoke the code for the MultiSelect plug-in:
Copy Code code as follows:
$ (function () {
$ ("select"). MultiSelect ({
Noneselectedtext: "= = Please choose = =",
Checkalltext: "Select All",
Uncheckalltext: ' All do not choose ',
Selectedlist:4
});
});
Call MultiSelect when there are a lot of parameters, I think the official document written very detailed, understand E-wen students can see OH.
OK, here is the question we are most concerned about, how to get the selected value?
The official document did not find a way to get the value of the item selected in the Select control. I read its source code, which is the 1.14pre version. I really didn't find it.
But we can DIY this plug-in Oh! It's easy to say!
First declare a variable to record the selected list of values, cut the graph:
Then we will find that the source code has an update method, this method is used to get the text of the user selected items, hehe, so we thought, simple DIY:
then add a method to your code:
Copy Code code as follows:
Myvalues:function () {
return multivalues;
}
OK, the plug-in to the DIY completed. Here is the call on the page:
Copy Code code as follows:
function ShowValues () {
var valuestr = $ ("#sela"). MultiSelect ("Myvalues");
alert (VALUESTR);
}
Yeah,ok!
DIY Code and demo see attachment.