Jquery multi-choice drop-down list plug-in jquery multiselect function introduction and use

Source: Internet
Author: User

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.

Related Article

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.