JavaScript如何從listbox里同時刪除多個項目
更新時間:2013年10月12日 17:22:09 作者:
要從列表框同時刪除多個項目只能從下向上刪除,這樣就不會出現(xiàn)索引號亂變的問題了,下面有個不錯的示例,大家可以感受下
要從列表框同時刪除多個項目,我們不能從上到下的刪除,因為上面的項目每刪除一個,下面的項目的索引號就會變化,所以只能從下向上刪除,這樣就不會出現(xiàn)索引號亂變的問題了。
html代碼
<table>
<tr>
<td align="center">
<select id="lsbox" name="lsbox" size="10" multiple>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">China</option>
<option value="4">Italy</option>
<option value="5">Germany</option>
<option value="6">Canada</option>
<option value="7">France</option>
<option value="8">United Kingdom</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<button onclick="listbox_remove('lsbox');">Delete</button>
<button onclick="window.location.reload();">Reset</button>
</td>
</tr>
</table>
javascript代碼如下:
function listbox_remove(sourceID) {
//get the listbox object from id.
var src = document.getElementById(sourceID);
//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {
//if the option is selected, delete the option
if(src.options[count].selected == true) {
try {
src.remove(count, null);
} catch(error) {
src.remove(count);
}
}
}
}
當然,如果使用jQuery來刪除,那就方便了,一句話就搞定了
$("#sourceId").find('option:selected').remove();
html代碼
復制代碼 代碼如下:
<table>
<tr>
<td align="center">
<select id="lsbox" name="lsbox" size="10" multiple>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">China</option>
<option value="4">Italy</option>
<option value="5">Germany</option>
<option value="6">Canada</option>
<option value="7">France</option>
<option value="8">United Kingdom</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<button onclick="listbox_remove('lsbox');">Delete</button>
<button onclick="window.location.reload();">Reset</button>
</td>
</tr>
</table>
javascript代碼如下:
復制代碼 代碼如下:
function listbox_remove(sourceID) {
//get the listbox object from id.
var src = document.getElementById(sourceID);
//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {
//if the option is selected, delete the option
if(src.options[count].selected == true) {
try {
src.remove(count, null);
} catch(error) {
src.remove(count);
}
}
}
}
當然,如果使用jQuery來刪除,那就方便了,一句話就搞定了
復制代碼 代碼如下:
$("#sourceId").find('option:selected').remove();
您可能感興趣的文章:
- JS ListBox的簡單功能實現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- javascript實現(xiàn)listbox左右移動實現(xiàn)代碼
- 使用javascript實現(xiàn)ListBox左右全選,單選,多選,全請
- 用JavaScript實現(xiàn)類似于ListBox功能示例代碼
- JavaScript控制兩個列表框listbox左右交換數(shù)據(jù)的方法
- 輕松使用jQuery雙向select控件Bootstrap Dual Listbox
- jquery控制listbox中項的移動并排序
- 基于JQUERY的兩個ListBox子項互相調(diào)整的實現(xiàn)代碼
- jquery控制listbox中項的移動并排序的實現(xiàn)代碼
- jquery移動listbox的值原理及代碼
- JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能示例
相關文章
javascript函數(shù)定義的幾種區(qū)別小結
本篇文章主要是對javascript函數(shù)定義的幾種區(qū)別進行了詳細的總結介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01Javascript DOM事件操作小結(監(jiān)聽鼠標點擊、釋放,懸停、離開等)
這篇文章主要介紹了Javascript DOM事件操作,結合實例形式總結分析了javascript監(jiān)聽鼠標點擊、釋放,懸停、離開等操作技巧,需要的朋友可以參考下2017-01-01JS實現(xiàn)靜態(tài)頁面搜索并高亮顯示功能完整示例
這篇文章主要介紹了JS實現(xiàn)靜態(tài)頁面搜索并高亮顯示功能,涉及javascript事件響應、字符遍歷替換及頁面元素屬性動態(tài)變換等相關操作技巧,需要的朋友可以參考下2017-09-09微信小程序scroll-view實現(xiàn)自定義滾動條
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)自定義滾動條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript File API實現(xiàn)文件上傳預覽
這篇文章主要為大家介紹了JavaScript File API實現(xiàn)文件上傳預覽,F(xiàn)ile API將極大地方便 Web 端的文件上傳等操作,本文將介紹 File API的概況,并用兩個實例展示File API的應用,感興趣的小伙伴們可以參考一下2016-02-02js監(jiān)聽輸入框值的即時變化onpropertychange、oninput
很多情況下我們都會即時監(jiān)聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網(wǎng)站的用戶體驗感。2011-07-07