Home > Web Front-end > JS Tutorial > body text

Jquery multi-select drop-down list plug-in jquery multiselect function introduction and use_jquery

WBOY
Release: 2016-05-16 17:33:15
Original
1708 people have browsed it

There is a need for multi-select, and I found this plug-in on the Internet: multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
There is an introduction to this plug-in on the csdn blog, and many children's shoes Everyone has asked this question, how to get the selected value? What a good question, because I also discovered this problem when watching the demo, haha!

Let’s briefly talk about this plug-in:
jquery-multiselect is based on the Jquery-ui component system.
So when using it, you must first import the js and css related to jquery-ui.
Features
•Support clicking the label to select the checkbox group.
•Header options, such as select all/cancel Select all/close function.
•Supports keyboard selection.
•Supports 5 different event callback functions.
•Displays selected items in list mode, and can set the maximum display value.
•Convenient Change the position, gradient speed, scroll container height, link text, text box default content, etc.
The effect is as shown below:


The code for the above image effect:
html code:
Copy code The code is as follows:



Code to call multiselect plug-in:
Copy code The code is as follows:

$(function(){
$("select").multiselect({
noneSelectedText: "==Please select==",
checkAllText: "Select all" ,
uncheckAllText: 'Unselect all',
selectedList:4
});
});

There are many parameters when calling multiselect, I think it is official The document is very detailed, students who know E-text can read it.
Okay, here is the question we are most concerned about, how to get the selected value?

The official documentation does not find a method to obtain the value of the selected item in the select control. I read its source code and it is version 1.14pre. Really not found.

But we can DIY this plug-in ourselves! Quite simply!
First declare a variable to record the selected value list. Take a screenshot:

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-selected item. , haha, so we thought of a simple DIY:


Then add a method in the code:
Copy code The code is as follows:

MyValues:function(){
return multiValues;
}

ok, the DIY of the plug-in is completed. The following is the call on the page:
Copy code The code is as follows:

function showValues() {
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}

Yeah, OK!
Please see the attachment for DIY code and demo.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template