Jquery多選下拉式清單外掛程式jquery multiselect功能介紹及使用

來源:互聯網
上載者:User

有一個多選的需求,在網上找到了這個外掛程式:multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn部落格上有這個外掛程式的介紹,不少童鞋都問了這麼個問題,怎麼擷取選中的值?真是個好問題,因為我在看demo的時候也發現了這個問題,呵呵!

先簡單說說這個外掛程式:
jquery-multiselect 基於Jquery-ui的組件體系。
所以使用它的時候,先得匯入jquery-ui相關的js和css哦
特性
•支援點擊label實現checkbox組選擇.
•頭部選項,如全選/ 取消全選 /關閉功能.
•支援鍵盤選擇.
•支援5種不同的事件回呼函數.
•以列表方式顯示選中項目,並且可以設定最大顯示值.
•方便改變位置,漸層速度,滾動容器的高度,連結文字,文字框預設內容等.
效果


效果的代碼:
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>

調用multiselect外掛程式的代碼:
複製代碼 代碼如下:
$(function(){
$("select").multiselect({
noneSelectedText: "==請選擇==",
checkAllText: "全選",
uncheckAllText: '全不選',
selectedList:4
});
});

調用multiselect時有不少參數,我想官方文檔寫的很詳啦,懂E文的同學都可以看看哦。
好,下面是我們最關心的問題,怎麼擷取選中的值?

官方文檔沒有找到哪個方法可以獲得select控制項中選中的項的值。我讀了它的原始碼,是 1.14pre版本。真的沒找到。

不過我們可以自己DIY一下這個外掛程式哦!很簡單地說!
首先聲明一個變數用來記錄選中的值列表,截個圖:
 
然後我們會發現源碼裡有一個update方法,這個方法是用來擷取使用者選中項的文本,呵呵,於是乎我們想到了,簡單DIY一下:


然後在代碼中添加一個方法:
複製代碼 代碼如下:
MyValues:function(){
return multiValues;
}

ok,對外掛程式的DIY完成了。下面是頁面上調用嘍:
複製代碼 代碼如下:
function showValues() {
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}

Yeah,OK啦!
Diy的代碼和Demo見附件。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.