select實現多選、全選、全不選

2017年03月08日 15:54:18 cat_pp 閱讀數：38078 標籤： select多選 更多

個人分類： html Web

版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/cat_pp/article/details/60874010

今天使用select下拉框實現了全選，全不選和多選的功能，效果如圖：

1、html程式碼：

為select標籤設定multiple屬性為true

• 1

<select id="myselect" multiple="true">
    <option value="1">java</option>
    <option value="2">javaSE</option>
    <option value="3">javaEE</option>
</select>
 

• 1
• 2
• 3
• 4
• 5

截圖和程式碼不相符，因為我用的是struts2框架，使用的是<s:select>標籤，直接使用list獲取下拉選項的，這裡只是說明一下問題。關於s:select標籤可以參考下面這個連結：
s:select標籤的使用和相關屬性說明
2、js程式碼：
接下來就是在js中設定select標籤的多選功能：

$("#myselect").multiselect({
    noneSelectedText : "--請選擇--", //當沒有內容選中時候顯示的文字
    checkAllText : "全選", //全選按鈕顯示的文字
    uncheckAllText : "全不選", //全不選按鈕顯示的文字
    minWidth : 200, //select框的寬度，根據option的內容長短設定
    selectedList : 2 //當選中的內容超過2條時，顯示“n已選擇”
});
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

別忘了引入js和css檔案，這兩個檔案收了1大洋，木有積分的親們可以加3393055725分享，下載地址：
http://download.csdn.net/detail/cat_pp/9774366