有一個多選的需求,在網路上找到了這個外掛:multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn部落格上有這個外掛的介紹,不少童鞋都問了這麼個問題,怎麼取得選取的值?真是個好問題,因為我在看demo的時候也發現了這個問題,呵呵!
先簡單說說這個外掛:
jquery-multiselect 基於Jquery-ui的元件系統。
所以使用它的時候,先得導入jquery-ui相關的js和css哦
特性•支持點擊label實現checkbox組選擇.
•頭部選項,如全選/ 取消全選/關閉功能.
•支援鍵盤選擇.
•支援5種不同的事件回呼函數.
•以列表方式顯示選取項目,並且可以設定最大顯示值.
•方便改變位置,漸變速度,捲動容器的高度,連結文字,文字方塊預設內容等.
效果如圖:
上圖效果的程式碼:
html代碼:
調用multiselect插件的代碼: 程式碼如下:
$(function(){
$("select").multiselect({multiselect").multiselect({multiselect").multiselect").
noneSelectedText: "==請選擇==",
checkAllText: "全選",
uncheckAllText: '全不選',
selectedList:4
});
});
呼叫multiselect時有不少參數,我想官方文件寫的很詳啦,懂E文的同學都可以看看哦。
好,以下是我們最關心的問題,怎麼取得選取的值?
官方文件沒有找到哪個方法可以獲得select控制項中選取的項目的值。我讀了它的原始碼,是 1.14pre版本。真的沒找到。
不過我們可以自己DIY一下這個插件!很簡單地說!
先宣告一個變數用來記錄選取的值列表,截圖:
然後我們會發現原始碼裡有一個update方法,這個方法是用來取得使用者選取項目的文本,呵呵,於是乎我們想到了,簡單DIY一下:
然後在代碼中添加一個方法:
程式碼如下:
MyValues:function(){
return multiValues;
}
ok,對外掛程式的DId>}
複製程式碼
程式碼如下:
function showValues() {function {function {function show
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}
Yeah,OK! Diy的程式碼和Demo見附件。