JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
更新時(shí)間:2013年10月12日 17:22:09 作者:
要從列表框同時(shí)刪除多個(gè)項(xiàng)目只能從下向上刪除,這樣就不會(huì)出現(xiàn)索引號(hào)亂變的問題了,下面有個(gè)不錯(cuò)的示例,大家可以感受下
要從列表框同時(shí)刪除多個(gè)項(xiàng)目,我們不能從上到下的刪除,因?yàn)樯厦娴捻?xiàng)目每刪除一個(gè),下面的項(xiàng)目的索引號(hào)就會(huì)變化,所以只能從下向上刪除,這樣就不會(huì)出現(xiàn)索引號(hào)亂變的問題了。
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);
}
}
}
}
當(dāng)然,如果使用jQuery來刪除,那就方便了,一句話就搞定了
$("#sourceId").find('option:selected').remove();
html代碼
復(fù)制代碼 代碼如下:
<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代碼如下:
復(fù)制代碼 代碼如下:
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);
}
}
}
}
當(dāng)然,如果使用jQuery來刪除,那就方便了,一句話就搞定了
復(fù)制代碼 代碼如下:
$("#sourceId").find('option:selected').remove();
您可能感興趣的文章:
- JS ListBox的簡(jiǎn)單功能實(shí)現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- javascript實(shí)現(xiàn)listbox左右移動(dòng)實(shí)現(xiàn)代碼
- 使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)
- 用JavaScript實(shí)現(xiàn)類似于ListBox功能示例代碼
- JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
- 輕松使用jQuery雙向select控件Bootstrap Dual Listbox
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- 基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- jquery移動(dòng)listbox的值原理及代碼
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
相關(guān)文章
javascript函數(shù)定義的幾種區(qū)別小結(jié)
本篇文章主要是對(duì)javascript函數(shù)定義的幾種區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01如何利用JavaScript實(shí)現(xiàn)二叉搜索樹
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript實(shí)現(xiàn)二叉搜索樹的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放,懸停、離開等)
這篇文章主要介紹了Javascript DOM事件操作,結(jié)合實(shí)例形式總結(jié)分析了javascript監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放,懸停、離開等操作技巧,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)靜態(tài)頁(yè)面搜索并高亮顯示功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)靜態(tài)頁(yè)面搜索并高亮顯示功能,涉及javascript事件響應(yīng)、字符遍歷替換及頁(yè)面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽
這篇文章主要為大家介紹了JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽,F(xiàn)ile API將極大地方便 Web 端的文件上傳等操作,本文將介紹 File API的概況,并用兩個(gè)實(shí)例展示File API的應(yīng)用,感興趣的小伙伴們可以參考一下2016-02-02js監(jiān)聽輸入框值的即時(shí)變化onpropertychange、oninput
很多情況下我們都會(huì)即時(shí)監(jiān)聽輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感。2011-07-07