你知道Javascript中如何操作select下拉列表的嗎，這里和大家分享一下，相信本文介紹一定會(huì)讓你有所收獲。

Javascript操作select下拉列表

javascript操作select下拉表,包括讀取select內(nèi)容,序號(hào),選擇值,還有添加option內(nèi)容,修改option內(nèi)容,改變option順序.

查看整體效果:javascript操作select下拉列表

1.首先是訪問(wèn)select的option.select定義了options的集合,可以通過(guò)元素集合來(lái)訪問(wèn).

舉例:

<selectidselectid="forasp_cn"name="forasp_cn"> 
<optionvalueoptionvalue="http://www.forasp.cn/"selected>
網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址</opiton> 
<optionvalueoptionvalue="http://www.forasp.cn/yule/">
網(wǎng)站制作學(xué)習(xí)網(wǎng)娛樂(lè)網(wǎng)址</opiton> 
<optionvalueoptionvalue="http://www.forasp.cn/tool/">
網(wǎng)站制作學(xué)習(xí)網(wǎng)工具網(wǎng)址</opiton> 
</select> 

js代碼如下:

varforaspobj=document.getElementById("forasp_cn")  
varoption_num=foraspobj.options.length;  
//獲取option的個(gè)數(shù),目前輸出3  
Dom下獲取select的option取顯示文本值和value值  
varoption_text1=foraspobj.options[0].firstChild.nodeValue;
//輸出"網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址"  
varoption_value1=foraspobj.options[0].getAttribute("value");
//輸出"http://www.forasp.cn/"  
Bom下獲取select的option顯示文本值和value值  
varoption_text1=foraspobj.option[0].text;//輸出同上  
varoption_text1=foraspobj.option[0].value;//輸出同上 

2.獲取select下面的目前選中的option的text和value值.select還有一個(gè)特殊的特性selectedIndex,它是目前選中選項(xiàng)的索引

alert(foraspobj.selectedIndex);//輸出0  
for(i=0;i<foraspobj.options.length;i++)  
{  
if(foraspobj.options[i].selected)  
{  
alert(foraspobj.options[i].text+
"\n"+foraspobj.options[i].value);  
//輸出"網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址回車http://www.forasp.cn/"  
break;  
}  
} 

3.修改select的option的value和text.

假設(shè)把***個(gè)text顯示值修改為http://www.forasp.cn/value值修改為網(wǎng)站制作學(xué)習(xí)網(wǎng)
Dom修改代碼如下: 

foraspobj.options[0].firstChild.nodeValue="http://www.forasp.cn";  
 
foraspobj.options[0].setAttribute("value","網(wǎng)站制作學(xué)習(xí)網(wǎng)"); 

Bom修改代碼如下: 

foraspobj.options[0].text="http://www.forasp.cn";  
foraspobj.options[0].value="網(wǎng)站制作學(xué)習(xí)網(wǎng)"; 

4.添加選項(xiàng),通過(guò)函數(shù)來(lái)添加select的option選項(xiàng)

t表示text值,v表示value值 

vartemp_option=document.createElement("option");  
//創(chuàng)建臨時(shí)option  
temp_option.appendChild(document.createTextNode("新增加內(nèi)容"));  
//給option創(chuàng)建子文本節(jié)點(diǎn)  
temp_option.setAttribute("value","新增加值");  
//給opiton賦值  
foraspobj.appendChild(temp_option)  
//將option附加到父類中 

5.刪除選項(xiàng),刪除select的option,直接用對(duì)應(yīng)的option對(duì)象等于空即可

比如刪除***一個(gè)選項(xiàng) 

if(foraspobj.options.length>0)  
{foraspobj.options[foraspobj.options.length-1]=null;} 

【編輯推薦】

1. 盤點(diǎn)JavaScript中Function三大用途
2. JS中Array數(shù)組的三大屬性用法揭秘
3. 詳解JavaScript中Object對(duì)象用法
4. Javascript數(shù)組創(chuàng)建及其常見(jiàn)操作
5. JavaScript調(diào)試工具解決IE6等多版本共存問(wèn)題