具体实现

<input type="hidden" id="q_dueDay" name="q_dueDay" value="${baseQueryBean.q_dueDay}">//这个为隐藏域后台直接使用这个为参数
<select id="example" name="example" multiple="multiple" style="width:195px">
<c:forEach varStatus="varStatus" begin="1" end="31" step="1">
<option value ="${varStatus.count}">${varStatus.count}</option>
</c:forEach>
</select>

------------------------------------------------------------------------------

js代码实现  先设置页面一加载就执行该js方法

$(function(){
  //初始化选中
var selected = $("#q_dueDay").val();//这个为保存的值，自己从数据库读取来赋值给v变量
selected = ',' + selected + ',';//添加分隔符号，好indexOf进行比较
var arr = selected.split(',');
$('#example option').each(function() {
if (selected.indexOf(',' + this.value + ',') != -1)
this.selected = true;
});
$("#example").multiselect({//该id为下拉框id

header: true,
height: 400,
minWidth: 100,
checkAllText: "√全选",
uncheckAllText: '×全不选',
selectedText: '# 个被选中',
selectedList: 10,
hide: ["", 400],
noneSelectedText: "===请选择===",
close: function(){
var values= $("#example").val();

if(values==null){//如果选中值为空。则直接把隐藏域 置为空防止缓存

$("#q_dueDay").val('');

}
if(values.length>0){
$("#q_dueDay").val(values);
}
}
});

});

--------------------------------------------------------------

//该方法为重置

$("#example").multiselect("uncheckAll");

--------------------------------------------------------------

//该方法为刷新当前插件防止缓存

$("#example").multiselect("refresh")//该方法是立刻刷新当前插件的

---------------------------------------------------------------------

最近一直在做多选级联 就贴出源码直接

//去后台查询数据该级联为两级

function testSelect(t){
if(t==null){
document.queryMainForm1.submit();
}

$.ajax({
type : "POST",
url : "${ctx}/urge-server/caseCenterCtrl/getSelect.do?id="+t,
dataType:"json",
async: false,
success : function(data) {
$("#q_caseBigCategory1").find("option").remove();
for(var i=0;i<data.list.length;i++){
$("#q_caseBigCategory1").append("<option value='"+data.list[i][0]+"'>"+data.list[i][1]+"</option>");
}
//展示
getmultiselect();
}
});

}


//展示
function getmultiselect(){
$("#q_caseBigCategory1").multiselect({
header: true,
height: 400,
minWidth: 100,
checkAllText: "√全选",
uncheckAllText: '×全不选',
selectedText: '# 个被选中',
selectedList: 10,
hide: ["", 400],
noneSelectedText: "===请选择===",
close: function(){
var values= $("#q_caseBigCategory1").val();
if(values==null){
$("#q_dueDay").val('');
}
if(values.length>0){
$("#q_dueDay").val(values);
}
}
});
$("#q_caseBigCategory1").multiselect("refresh")//该方法是立刻刷新当前插件的
}

----------------------------------------完整例子---------------------------------------------------

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

multiselect多选下拉框的更多相关文章

  1. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  3. Extjs4.2 多选下拉框

    //多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...

  4. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  5. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  6. ExtJs5.1多选下拉框CheckComb

    ExtJs这么多个版本号了.可就是不提供多选下拉框,老外不用这个玩意吗? 5都出来这么久了,新写的项目就用5吧,把曾经Extjs4.2的时搜到前人的CheckComb改巴改巴.能用了就赶紧贴上来,没有 ...

  7. 自定义SWT控件二之自定义多选下拉框

    2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...

  8. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  9. Easyui-Combobox多选下拉框

    因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...

随机推荐

  1. slice,splice,split,unshift的用法

    工作了很久始终对这4个用法处于混淆状态,今天写个帖子来警示下自己 // slice(start,end),从start值开始截取到end前的元素组成新的数组,不改变原数组 // slice(index ...

  2. 添加/删除/读写c盘文件——c#

    一.前言: 有时候我们为自己的程序添加配置文件,如tet.ini.xml等文件,又或者保存软件运行时的日志 当我们把软件打包后,默认安装在c盘,而配置文件也会跟随生成在安装目录下 此时你会发现,配置文 ...

  3. 浅入 .NET Core 中的内存和GC知识

    目录 托管代码 自动内存管理 参考资料: [1]https://docs.microsoft.com/zh-cn/dotnet/standard/managed-code [2]:https://do ...

  4. js 鼠标点击页面出现文字

    <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { ...

  5. Java内存模型与线程（二）线程的实现和线程的调度

    先行先发生原则(happen-before原则) 先行先发生是指Java内存模型中定义的两项操作之间的偏序关系. 如果说A先行于B,其实就是说在发生B操作之前,操作A产生的影响能被操作B观察到,至于这 ...

  6. upload-labs 1-21关通关记录

    0x01: 检查源代码,发现JS前端验证,关闭JS即可连接,或者手动添加.php,或者上传1.jpg,再抓包修改为php 0X02: if (($_FILES['upload_file']['type ...

  7. apiAutoTest: 接口自动化测试的数据清洗(备份/恢复)处理方案

    接口自动化测试之数据清洗/隔离/备份/恢复 在得到QQ:1301559180 得代码贡献之后,想到了通过ssh连接上服务器,然后进行数据库备份,数据库恢复, 主要使用了 paramiko库 最终效果 ...

  8. Web安全之CSRF（跨站请求伪造）

    CSRF(跨站请求伪造)概述 Cross-site request forgery 简称为"CSRF",在CSRF的攻击场景中攻击者会伪造一个请求(这个请求一般是一个链接),然后欺 ...

  9. js 前端词典对象的属性和值读取

    通常服务端返回比较奇葩的数据对象,不知道该怎么将这个对象转换为可用实体,想了很久,突发奇想想到了这么个方法. 需求是这样:企业有多个产品,产品有分为很几个种类.服务端有获取产品的接口,和单独获取产品种 ...

  10. 2021年官网下载各个版本JDK最全版与官网查阅方法

    版本说明 1.安装部署JDK (1)环境 (2)官网下载JDK 由于官网的地址会随着时间的修改而更改修改下载地址,现在讲述下通用的界面操作下载JDK,以后JDK收费更严重,估计就只能下载开源的了. A ...