jQuery實(shí)現(xiàn)下拉框多選 jquery-multiselect 的實(shí)例代碼
先給大家展示下效果圖:
除了jquery,需要引用的樣式和js文件:
<link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /> <link rel="stylesheet" type="text/css" href="../assets/prettify.css" /> <link href="../assets/jquery-ui.css" rel="stylesheet" /> <script src="../assets/jquery.js"></script> <script src="../assets/jquery-ui.min.js"></script> <script type="text/javascript" src="../assets/prettify.js"></script> <script type="text/javascript" src="../assets/jquery.multiselect.js" charset=gb2312></script>
HTML代碼:
<select title="Basic example" multiple="multiple" name="example-basic" size="5" id="ddlConditions"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> <option value="7">Option 7</option> </select>
默認(rèn)選中值1,2,3,綁定指定的選項(xiàng):
var strcondition = '1,2,3'; var ids = strcondition.split(','); if (ids != null) { $('#ddlConditions').val(ids); $('#ddlConditions').multiselect("refresh"); }
獲取選中的多個(gè)值:
首先修改jquery.multiselect.js,添加全局變量multiValues ,用來存放選項(xiàng)值,然后修改update方法,添加multiValues 那一行代碼:
update: function() { var o = this.options; var $inputs = this.inputs; var $checked = $inputs.filter(':checked'); var numChecked = $checked.length; var value; if(numChecked === 0) { value = o.noneSelectedText; } else { if($.isFunction(o.selectedText)) { value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get()); } else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) { value = $checked.map(function() { return $(this).next().html(); }).get().join(', '); } else { value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length); } multiValues = $checked.map(function () { return $(this).val(); }).get().join(','); } this._setButtonValue(value); return value; },
再添加自定義方法:
MyValues:function(){ return multiValues; },
頁面使用此自定義方法,獲取選中值的代碼:
if ($('input[name=multiselect_ddlConditions]:checked').length < 1) alert('Please Select Option'); else { var strConditions = $("#ddlConditions").multiselect("MyValues"); }
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)下拉框多選 jquery-multiselect 的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jQuery使用Selectator插件實(shí)現(xiàn)多選下拉列表過濾框(附源碼下載)
- 基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
- jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- JQuery select(下拉框)操作方法匯總
- jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- jquery multiSelect 多選下拉框
- jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能
相關(guān)文章
jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
這篇文章主要介紹了jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法,結(jié)合實(shí)例形式分析了jQuery使用ajax與后臺(tái)php交互實(shí)現(xiàn)元素的排序,上移、下移功能相關(guān)操作技巧2016-11-11jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-03-03基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
基于JQuery的拖動(dòng)插件有幾個(gè)都相當(dāng)好用,效果也很好,但再好,還是自己琢磨一個(gè)最好。所以,我的理念就是即使實(shí)際項(xiàng)目中使用別人的程序,自己也得根據(jù)自己的理解和想法寫一個(gè)出來。那么今天,就來看看我的思路是不是可以實(shí)現(xiàn)拖動(dòng)排序的功能2013-10-10jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)(5)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12jQuery不間斷滾動(dòng)效果(模擬百度新聞支持文字/圖片/垂直滾動(dòng))
jQuery模擬百度新聞不間斷滾動(dòng)效果并且支持文字、圖片水平垂直滾動(dòng)等等,感興趣的朋友可以了解下,或許本文所提供的案例對(duì)你學(xué)習(xí)jquery特效有所幫助,好了話不多說,切入正題2013-02-02Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改,版權(quán)信息僅保留致謝信息,刪除作者為了代碼整體提示美觀度,故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本2011-07-07