There is a multi-choice requirement. I found this plug-in on the Internet: multiselect
Https://github.com/ehynds/jquery-ui-multiselect-widget
This plug-in is introduced on the csdn blog. Many children's shoes have asked this question. How can I obtain the selected value? This is really a good problem, because I also found this problem while reading the demo, haha!
Let's briefly talk about this plug-in:
Jquery-multiselect is a Jquery-ui-based component system.
When using it, you must first import js and css related to jquery-ui.
Features
• You can click label to select a checkbox group.
• Header options, such as full select/cancel all select/disable.
• Supports keyboard selection.
• Supports five different Event Callback functions.
• Display selected projects in list mode and set the maximum value.
• Easy to change location, gradient speed, scroll container height, link text, text box default content, etc.
Effect
Result code:
Html code:
Copy codeThe Code is 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>
Code for calling the multiselect plug-in:
Copy codeThe Code is as follows:
$ (Function (){
$ ("Select"). multiselect ({
NoneSelectedText: "= select = ",
CheckAllText: "select all ",
UncheckAllText: 'All disselect ',
SelectedList: 4
});
});
There are a lot of parameters when you call multiselect. I 'd like to write a lot of details in the official documentation. You can read all those who know E.
Well, the following are our most important questions. How can we get the selected value?
The official document does not find a method to obtain the value of the selected item in the select control. I read its source code, which is 1.14pre. Not found.
But we can DIY this plug-in on our own! Simply put!
First, declare a variable to record the selected value list, and cut the graph:
Then we will find that there is an update method in the source code. This method is used to obtain the text of the user's selected items:
Then add a method to the Code:
Copy codeThe Code is as follows:
MyValues: function (){
Return multiValues;
}
OK. The DIY plug-in is complete. Below is the call on the page:
Copy codeThe Code is as follows:
Function showValues (){
Var valuestr = $ ("# sela"). multiselect ("MyValues ");
Alert (valuestr );
}
Yeah, OK!
For the Diy code and Demo, see the attachment.