標籤：style blog http color os java io ar 檔案
一、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>
My Code實現就是這裡了，用一個隱藏欄位取值我認為清晰一些。
demo見附件
關於jquery multiselect用法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
