解析Javascript對select下拉式清單操作

你知道Javascript中如何操作select下拉式清單的嗎，這裡和大家分享一下，相信本文介紹一定會讓你有所收穫。

Javascript操作select下拉式清單

javascript操作select下拉表,包括讀取select內容,序號,選擇值,還有添加option內容,修改option內容,改變option順序.

查看整體效果:javascript操作select下拉式清單

1.首先是訪問select的option.select定義了options的集合,可以通過元素集合來訪問.

舉例:

 

  
<selectidselectid="forasp_cn"name="forasp_cn"> 
  
<optionvalueoptionvalue="http://www.forasp.cn/"selected>
  
網站製作學習網網址</opiton> 
  
<optionvalueoptionvalue="http://www.forasp.cn/yule/">
  
網站製作學習網娛樂網址</opiton> 
  
<optionvalueoptionvalue="http://www.forasp.cn/tool/">
  
網站製作學習網工具網址</opiton> 
  
</select> 
 

js代碼如下:

 

  
varforaspobj=document.getElementById("forasp_cn")  
  
varoption_num=foraspobj.options.length;  
  
//擷取option的個數,目前輸出3  
  
Dom下擷取select的option取顯示文本值和value值  
  
varoption_text1=foraspobj.options[0].firstChild.nodeValue;
  
//輸出"網站製作學習網網址"  
  
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還有一個特殊的特性selectedIndex,它是目前選中選項的索引

 

  
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);  
  
//輸出"網站製作學習網網址斷行符號http://www.forasp.cn/"  
  
break;  
  
}  
  
} 
 

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

假設把第一個text顯示值修改為http://www.forasp.cn/value值修改為網站製作學習網
Dom修改代碼如下: 

 

  
foraspobj.options[0].firstChild.nodeValue="http://www.forasp.cn";  
  
 
  
foraspobj.options[0].setAttribute("value","網站製作學習網"); 
 

Bom修改代碼如下: 

 

  
foraspobj.options[0].text="http://www.forasp.cn";  
  
foraspobj.options[0].value="網站製作學習網"; 
 

4.添加選項,通過函數來添加select的option選項

t表示text值,v表示value值 

 

  
vartemp_option=document.createElement("option");  
  
//建立臨時option  
  
temp_option.appendChild(document.createTextNode("新增加內容"));  
  
//給option建立子文本節點  
  
temp_option.setAttribute("value","新增加值");  
  
//給opiton賦值  
  
foraspobj.appendChild(temp_option)  
  
//將option附加到父類中 
 

5.刪除選項,刪除select的option,直接用對應的option對象等於空即可

比如刪除最後一個選項 

 

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