具體實現?
?
?
<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>
?
是如何確認賬號密碼的_教你如何刪除、關閉、注銷微信小程序...)
