关于jquery multiselect用法

一、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>
        

我的代码实现就是这里了,用一个隐藏域取值我认为清晰一些。

demo见附件

时间: 2024-10-18 01:24:36

关于jquery multiselect用法的相关文章

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jQuery $.each用法[转]

jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象.数组的属性值并进行处理. each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this;       //这里的this指向每次遍历中Object的当前属性值 p1; p2;     //访问附加参数 },

JQuery datepicker 用法

JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/the

jQuery tmpl用法总结

原文:jQuery tmpl用法总结 之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/ github网址:https://github.com/jquery/jquery-tmpl        http://jquery.github.co

jquery.fn.extend与jquery.extend用法与区别

关于jquery.fn.extend与jquery.extend用法与区别. jQuery为开发插件提拱了两个方法,分别是:  代码如下 复制代码 jQuery.fn.extend(object);  和   jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现.  代码如下 复制

jquery中下拉多选插件jquery.multiSelect的使用

使用multiSelect需要导入jquery.bgiframe.min.js,jquery.multiSelect.css,jquery.multiSelect.js还有几个图片. 案例 html代码: <td>部门:       <select id="departmentId" name="roleIds" style="width:180px" multiple="multiple">     

jquery.multiSelect下拉框多选

使用multiSelect需要导入jquery.bgiframe.min.js,jquery.multiSelect.css,jquery.multiSelect.js还有一些图片,详见附件. 案例 jsp代码: <td>部门:         <select id="departmentId" name="roleIds" style="width:180px" multiple="multiple">

jQuery -&gt; filter用法

利用filter函数可以从wrapper set中过滤符合条件的DOM元素. 如果我们有一个内容如下的html文件,要获取类为external的<a>元素,使用filter可以很easy地搞定. <a href="#" class="external">link</a> <a href="#" class="external">link</a> <a href=

jQuery $.extend()用法

$.extend()用法总结. jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. <span style="font-size:18px;"><html> <hea