关于jquery multiselect用法

浏览数：551 / 时间：2015年06月09日

一、jquery multiselect的作用

　　我们通过select标签做一个对比。select标签我相信大家应该都用过，我们做查询的时候经常会用到select做为条件进行查询，但是select有一个弊端，那就是你只能选择其中的一个条件进行筛选查询，select需要一下子选中多个条件查询，那实现起来就比较麻烦了。那么jquery multiselect就是为这个而进行处理的。这是效果图

选择之后

内容过多是这种效果

二、用法

引用js文件和css文件

jquery-ui.min.js,

jquery.multiselect.js

jquery.multiselect.css

jquery-ui.css

<head>
    <script type="text/javascript"src="/static/jquery-multiselect/jquery-ui.min.js"></script>
    <script type="text/javascript"src="/static/jquery-multiselect/jquery.multiselect.js"></script>
    <link type="text/css" rel="stylesheet" href="/static/jquery-multiselect/css/jquery.multiselect.css" />
    <link type="text/css" rel="stylesheet" href="/static/jquery-multiselect/css/jquery-ui.css" />
</head>
    <script type="text/javascript">
        $(function(){
　　　　　　//id为q_contractStatus的是页面上一个隐藏域的一个值，前台选择的，或者后台传过来需要显示的。
            var selected = $(‘#q_contractStatus‘).val();
            selected = ‘,‘ + selected + ‘,‘;
            var arr = selected.split(‘,‘);
　　　　　　//循环判断哪些需要勾选
            $(‘#contrStatus option‘).each(function() {
                if (selected.indexOf(‘,‘ + this.value + ‘,‘) != -1)
                this.selected = true;
            });
　　　　　　//这里是主要内容
            $(‘#contrStatus‘).multiselect({
                header: true,
                height: 400,
                minWidth: 100,
                checkAllText: ‘√全选‘,
                uncheckAllText: ‘×全不选‘,
                selectedText: ‘# 个被选中‘,
                selectedList: 4,
                hide: [‘‘, 400],
                noneSelectedText: ‘===请选择===‘,
                close: function(){
                var values1=$(‘#contrStatus‘).val();
                if(values1==null){
                    $(‘#q_contractStatus‘).val(‘‘);
                }
                if(values1.length>0){
　　　　　　　　　　　　//对选择的值放入隐藏域，查询的时候直接用隐藏域
                    $(‘#q_contractStatus‘).val(values1);
                }}
            });
        });
    </script>
    <body>
    <select id=‘contrStatus‘ name=‘contrStatus‘  multiple=‘multiple‘ style=‘width:190px‘>
        <option value="1" >合同待签订</option>
        <option value="2" >确认退回</option>
        <option value="3" >拒贷</option>
        <option value="4" >合同待确认</option>
        <option value="5" >合同已确认</option>
        <option value="6" >审核退回</option>
        <option value="7" >已签约</option>
        <option value="8" >待放款</option>
        <option value="9" >放款失败</option>
        <option value="10" >已放款</option>
        <option value="71" >初审已确认</option>
        <option value="72" >复审退回</option>
        <option value="21" >签约超时</option>
        <option value="73" >到期已还清</option>
        <option value="74" >到期欠本息</option>
        <option value="75" >到期欠违约金</option>
        <option value="76" >一次性结清</option>
        <option value="77" >放款审核退回</option>
        <option value="78" >财务放款退回</option>
        <option value="79" >已签约（重新提交）</option>
        <option value="11" >放款撤销</option><option value="12" >客户放弃</option>
</select>