jquery mutiselect 可以查询的下拉框

最新推荐文章于 2025-11-12 09:54:44 发布

原创最新推荐文章于 2025-11-12 09:54:44 发布 · 727 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#mutiselect

前端代码专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQuery MultiSelect插件创建可查询的多选下拉框，包括引入必要的JS和CSS文件、HTML结构设置、添加搜索功能及动态赋值方法。

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);
    }
});