首页 > 代码库 > 关于jquery multiselect用法
关于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="http://www.mamicode.com/static/jquery-multiselect/jquery-ui.min.js"></script> <script type="text/javascript"src="http://www.mamicode.com/static/jquery-multiselect/jquery.multiselect.js"></script> <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/static/jquery-multiselect/css/jquery.multiselect.css" /> <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/1" >合同待签订</option> <option value="http://www.mamicode.com/2" >确认退回</option> <option value="http://www.mamicode.com/3" >拒贷</option> <option value="http://www.mamicode.com/4" >合同待确认</option> <option value="http://www.mamicode.com/5" >合同已确认</option> <option value="http://www.mamicode.com/6" >审核退回</option> <option value="http://www.mamicode.com/7" >已签约</option> <option value="http://www.mamicode.com/8" >待放款</option> <option value="http://www.mamicode.com/9" >放款失败</option> <option value="http://www.mamicode.com/10" >已放款</option> <option value="http://www.mamicode.com/71" >初审已确认</option> <option value="http://www.mamicode.com/72" >复审退回</option> <option value="http://www.mamicode.com/21" >签约超时</option> <option value="http://www.mamicode.com/73" >到期已还清</option> <option value="http://www.mamicode.com/74" >到期欠本息</option> <option value="http://www.mamicode.com/75" >到期欠违约金</option> <option value="http://www.mamicode.com/76" >一次性结清</option> <option value="http://www.mamicode.com/77" >放款审核退回</option> <option value="http://www.mamicode.com/78" >财务放款退回</option> <option value="http://www.mamicode.com/79" >已签约（重新提交）</option> <option value="http://www.mamicode.com/11" >放款撤销</option><option value="http://www.mamicode.com/12" >客户放弃</option></select>
我的代码实现就是这里了，用一个隐藏域取值我认为清晰一些。
demo见附件
关于jquery multiselect用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。