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代碼

復(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();

您可能感興趣的文章:

相關(guān)文章

Javascript中的Callback方法淺析
這篇文章主要介紹了Javascript中的Callback方法淺析,本文講解了什么是callback、Javscript Callback、Callback是什么、Callback實(shí)例等內(nèi)容,需要的朋友可以參考下
2015-03-03
JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點(diǎn)示例
運(yùn)行代碼之后隨意移動(dòng)鼠標(biāo)的位置，可適時(shí)顯現(xiàn)鼠標(biāo)的坐標(biāo)點(diǎn)，不占用系統(tǒng)資源
2014-03-03
JavaScript和JQuery獲取DIV值的方法示例
這篇文章主要介紹了JavaScript和JQuery獲取DIV值的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript與jQuery獲取頁(yè)面div元素值的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
固定網(wǎng)頁(yè)背景圖同時(shí)保持圖片比例的思路代碼
代碼功能：背景圖片固定，隨窗口大小改變而改變大小,保持比例不變而縮放，有此需求的朋友可以參考下
2013-08-08
JS前端筆試題分析
這篇文章主要介紹了JS前端筆試題,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)組及日期操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十九） js表格排序
js表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下
2012-08-08
Js數(shù)組的操作push,pop,shift,unshift等方法詳細(xì)介紹
js中針對(duì)數(shù)組操作的方法還是比較多的，今天突然想到來總結(jié)一下，也算是溫故而知新吧。不過不會(huì)針對(duì)每個(gè)方法進(jìn)行講解，我只是選擇其中的一些來講,感興趣的朋友可以研究一下
2012-12-12
修改layui的后臺(tái)模板的左側(cè)導(dǎo)航欄可以伸縮的方法
今天小編就為大家分享一篇修改layui的后臺(tái)模板的左側(cè)導(dǎo)航欄可以伸縮的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
window.location 對(duì)象所包含的屬性
這篇文章主要介紹了window.location 對(duì)象所包含的屬性,這些熟悉都是工作中經(jīng)常會(huì)用到的，很實(shí)用，需要的朋友可以參考下
2014-10-10
javascript中的數(shù)據(jù)類型檢測(cè)方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測(cè)方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測(cè)操作技巧,需要的朋友可以參考下
2019-08-08