Jquery multiple-choice drop-down list plug-in jquery multiselect

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.
  • Displays selected items in the list and sets the maximum value.
  • Easy to change location, gradient speed, scroll container height, link text, text box default content, etc.

Effect

Result code:

    Option 1    Option 2    Option 3    Option 4    Option 5    Option 6    Option 7    Option 8    Option 9    Option 10    Option 11    Option 12    

Code for calling the multiselect plug-in:

$ ("Select" "= select =" "select all" 'select none of '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:

   MyValues:

OK. The DIY plug-in is complete. Below is the call on the page:

       valuestr = $("#sela").multiselect("MyValues"  }

Yeah, OK!

For the Diy code and Demo, see the 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.