jquery multiple-select dropdown list plugin jquery MultiSelect features introduction and usage _jquery

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.