jquery implementation of the Drop-down box multiple selection jquery-multiselect instance code _jquery

First to show you the effect of the picture:

In addition to jquery, you need to refer to the styles and JS files:

<link rel= "stylesheet" type= text/css "href=". /assets/jquery.multiselect.css "/> <link rel=" stylesheet "type=" Text/css "href="
. /assets/style.css "/> <link rel=" stylesheet "type=" Text/css "href="
. /assets/prettify.css "/>
<link href=". /assets/jquery-ui.css "rel=" stylesheet "/>
<script src=". /assets/jquery.js "></script>
<script src=". /assets/jquery-ui.min.js "></script>
<script type=" Text/javascript "src=". /assets/prettify.js "></script>
<script type=" Text/javascript "src=". /assets/jquery.multiselect.js "charset=gb2312></script>

HTML code:

<select title= "Basic example" multiple= "multiple" name= "Example-basic" size= "5" id= "Ddlconditions" >
< Option value= "1" >option 1</option>
<option value= "2" >option 2</option>
Value= "3" >option 3</option>
<option value= "4" >option 4</option> <option-value=
"5" >option 5</option>
<option value= "6" >option 6</option> <option value=
"7" >Option 7</option>

The default check value, 1,2,3, binds the specified options:

var strcondition = ' 1,2,3 '; 
var ids = Strcondition.split (', '); 
if (IDs!= null) { 
$ (' #ddlConditions '). Val (IDs);
$ (' #ddlConditions '). MultiSelect ("refresh"); 

To get more than one value selected:

First modify the Jquery.multiselect.js, add the global variable multivalues to hold the option value, and then modify the Update method to add the Multivalues line of code:

Update:function () {
var o = this.options;
var $inputs = this.inputs;
var $checked = $inputs. Filter (': Checked ');
var numchecked = $checked. length;
var value;
if (numchecked = = 0) {
value = O.noneselectedtext
} else {
if ($.isfunction (O.selectedtext)) {
value = O.selectedtext.call (This, numchecked, $inputs. Length, $checked. get ());
} else if (/\d/.test (o.selectedlist) && o.selectedlist > 0 && numchecked <= o.selectedlist) {
Value = $checked. Map (function () {return $ (this). Next (). html ();}). Get (). Join (', ');
else {
value = o.selectedtext.replace (' # ', numchecked). Replace (' # ', $inputs. length);
Multivalues = $checked. Map (function () {return $ (this). val ();}). Get (). Join (', ');
This._setbuttonvalue (value);
return value;

Add the custom method again:

Myvalues:function () {return
multivalues;

Page uses this custom method to get the code for the selected value:

if ($ (' input[name=multiselect_ddlconditions]:checked '). Length < 1)
alert (' Please Select Option ');
else {
var strconditions = $ ("#ddlConditions"). MultiSelect ("Myvalues");

The above is a small series of jquery to introduce the implementation of the dropdown box Jquery-multiselect example code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!