Jquery多選下拉列表插件jquery multiselect功能介紹及使用
更新時(shí)間：2013年05月24日 16:44:53 作者：
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇，頭部選項(xiàng)，如全選/ 取消全選 /關(guān)閉功能,支持鍵盤選擇等等，下面與大家分享下具體使用
有一個(gè)多選的需求，在網(wǎng)上找到了這個(gè)插件：multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn博客上有這個(gè)插件的介紹，不少童鞋都問了這么個(gè)問題，怎么獲取選中的值？真是個(gè)好問題，因?yàn)槲以诳磀emo的時(shí)候也發(fā)現(xiàn)了這個(gè)問題，呵呵！
先簡單說說這個(gè)插件：
jquery-multiselect 基于Jquery-ui的組件體系。
所以使用它的時(shí)候，先得導(dǎo)入jquery-ui相關(guān)的js和css哦
特性
•支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇.
•頭部選項(xiàng)，如全選/ 取消全選 /關(guān)閉功能.
•支持鍵盤選擇.
•支持5種不同的事件回調(diào)函數(shù).
•以列表方式顯示選中項(xiàng)目，并且可以設(shè)置最大顯示值.
•方便改變位置，漸變速度，滾動(dòng)容器的高度，鏈接文字，文本框默認(rèn)內(nèi)容等.
效果如圖：
上圖效果的代碼：
html代碼：
<select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
<option value="V1">Option 1</option>
<option value="V2">Option 2</option>
<option value="V3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
</select>
調(diào)用multiselect插件的代碼：
$(function(){
$("select").multiselect({
noneSelectedText: "==請(qǐng)選擇==",
checkAllText: "全選",
uncheckAllText: '全不選',
selectedList:4
});
});
調(diào)用multiselect時(shí)有不少參數(shù)，我想官方文檔寫的很詳啦，懂E文的同學(xué)都可以看看哦。
好，下面是我們最關(guān)心的問題，怎么獲取選中的值？
官方文檔沒有找到哪個(gè)方法可以獲得select控件中選中的項(xiàng)的值。我讀了它的源代碼，是 1.14pre版本。真的沒找到。
不過我們可以自己DIY一下這個(gè)插件哦！很簡單地說！
首先聲明一個(gè)變量用來記錄選中的值列表，截個(gè)圖：
然后我們會(huì)發(fā)現(xiàn)源碼里有一個(gè)update方法，這個(gè)方法是用來獲取用戶選中項(xiàng)的文本，呵呵，于是乎我們想到了，簡單DIY一下：
然后在代碼中添加一個(gè)方法：
MyValues:function(){
return multiValues;
}
ok，對(duì)插件的DIY完成了。下面是頁面上調(diào)用嘍：
function showValues() {
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}
Yeah，OK啦！
Diy的代碼和Demo見附件。
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn博客上有這個(gè)插件的介紹，不少童鞋都問了這么個(gè)問題，怎么獲取選中的值？真是個(gè)好問題，因?yàn)槲以诳磀emo的時(shí)候也發(fā)現(xiàn)了這個(gè)問題，呵呵！
先簡單說說這個(gè)插件：
jquery-multiselect 基于Jquery-ui的組件體系。
所以使用它的時(shí)候，先得導(dǎo)入jquery-ui相關(guān)的js和css哦
特性
•支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇.
•頭部選項(xiàng)，如全選/ 取消全選 /關(guān)閉功能.
•支持鍵盤選擇.
•支持5種不同的事件回調(diào)函數(shù).
•以列表方式顯示選中項(xiàng)目，并且可以設(shè)置最大顯示值.
•方便改變位置，漸變速度，滾動(dòng)容器的高度，鏈接文字，文本框默認(rèn)內(nèi)容等.
效果如圖：
上圖效果的代碼：
html代碼：
復(fù)制代碼 代碼如下:
<select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
<option value="V1">Option 1</option>
<option value="V2">Option 2</option>
<option value="V3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
</select>
調(diào)用multiselect插件的代碼：
復(fù)制代碼 代碼如下:
$(function(){
$("select").multiselect({
noneSelectedText: "==請(qǐng)選擇==",
checkAllText: "全選",
uncheckAllText: '全不選',
selectedList:4
});
});
調(diào)用multiselect時(shí)有不少參數(shù)，我想官方文檔寫的很詳啦，懂E文的同學(xué)都可以看看哦。
好，下面是我們最關(guān)心的問題，怎么獲取選中的值？
官方文檔沒有找到哪個(gè)方法可以獲得select控件中選中的項(xiàng)的值。我讀了它的源代碼，是 1.14pre版本。真的沒找到。
不過我們可以自己DIY一下這個(gè)插件哦！很簡單地說！
首先聲明一個(gè)變量用來記錄選中的值列表，截個(gè)圖：
然后我們會(huì)發(fā)現(xiàn)源碼里有一個(gè)update方法，這個(gè)方法是用來獲取用戶選中項(xiàng)的文本，呵呵，于是乎我們想到了，簡單DIY一下：
然后在代碼中添加一個(gè)方法：
復(fù)制代碼 代碼如下:
MyValues:function(){
return multiValues;
}
ok，對(duì)插件的DIY完成了。下面是頁面上調(diào)用嘍：
復(fù)制代碼 代碼如下:
function showValues() {
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}
Yeah，OK啦！
Diy的代碼和Demo見附件。
您可能感興趣的文章:
- Chosen 基于jquery的選擇框插件使用方法
- jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 基于JQuery的Select選擇框的華麗變身
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例
- jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
- 各種選擇框jQuery的選中方法(實(shí)例講解)
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡單的下拉菜單
- jQuery模擬12306城市選擇框功能簡單實(shí)現(xiàn)方法示例
相關(guān)文章
本篇文章主要分享的是幾個(gè)上傳文件的例子和邏輯步奏及自定義個(gè)簡單的js上傳插件。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹，本文通過代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹的過程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法,可實(shí)現(xiàn)表格隔行變色以及鼠標(biāo)滑過與點(diǎn)擊時(shí)變色的功能,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)改變的相關(guān)技巧,需要的朋友可以參考下2016-08-08
地址欄射擊游戲!對(duì)，你沒看錯(cuò)，就是在地址欄上玩的游戲，有圖有真相！之前在網(wǎng)上看到這個(gè)小游戲，可惜在墻外，中午研究了一下，搬到國內(nèi)來了，看看吧！2011-03-03
本文給大家匯總了2014年最熱門的9款jQuery特效插件，小伙伴們根據(jù)自己的需求直接帶走吧。2014-12-12
基于jquery實(shí)現(xiàn)的文字淡入淡出效果
這篇文章介紹了jquery實(shí)現(xiàn)的文字淡入淡出效果實(shí)例，有需要的朋友可以參考一下2013-11-11
jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法,涉及jQuery針對(duì)json數(shù)據(jù)的讀取、遍歷及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02
jQuery對(duì)指定元素中指定字符串進(jìn)行替換的方法
這篇文章主要介紹了jQuery對(duì)指定元素中指定字符串進(jìn)行替換的方法,涉及jQuery針對(duì)字符串的匹配與替換的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法
這篇文章主要介紹了jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法,使用jQuery動(dòng)態(tài)修改元素背景色的方法實(shí)現(xiàn)星評(píng)功能,需要的朋友可以參考下2015-05-05