欢迎使用CSDN-markdown编辑器

jquery mutiselect 可以查询的下拉框

首先来看效果：

一：引入js和css

<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery.multiselect.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/style.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/prettify.css" /><script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script><script type="text/javascript" src="~/Scripts/jquerymultiselect/prettify.js"></script><script type="text/javascript" src="~/Scripts/jquerymultiselect/jquery.multiselect.min.js"></script>

二：HTML页面代码，和普通的select标签一样。

<select id="size" name="size" multiple="multiple"></select>

这里需要注意：如果增加了‘multiple=”multiple”’这个属性，则select可以多选，否则就是单选。

三：js代码

$('#size').multiselect({            buttonWidth: '637px',            maxHeight: 250,            enableFiltering:true        });

增加‘enableFiltering:true’属性，搜索框才会出现。

四：设置其默认选中

单选可以使用this.selected=true方法。

$('#brandId option').each(function(){     if($!{product.brandId} == this.value){         this.selected=true;         //设置选中值之后，需要刷新一下select.         $("#brandId").multiselect('refresh');     } });

多选则使用：

$('#size').multiselect().val(sizeList).multiselect("refresh");

其中sizeList为后台传递的集合。

五：动态对select进行赋值

$.ajax({    type :"post",    url : "/ParamInfoController/getByType",    data : {"catId":recode.id, "type":2},    async : false,    success : function(data){        var options = new Array();        $.each(data, function(index, values) {            //循环将data数据的结构重新调整为下面这样的：[{label:xxx,value:id}]            // laebl相当于option的文字，value则是option的value，结构不能错            options.push({                label : values.text,                value : values.id            });        });        $("#size").multiselect('dataprovider',options);    }});