javascript操作select下拉表,包括讀取select內(nèi)容,序號,選擇值,還有添加option內(nèi)容,修改option內(nèi)容,改變option順序.
查看整體效果:javascript操作select下拉列表
1.首先是訪問select的option.select定義了options的集合,可以通過元素集合來訪問.
舉例:
<select id="forasp_cn" name = "forasp_cn">
<option value="http://www.ynpxrz.com/" selected>網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址</opiton>
<option value="http://www.ynpxrz.com/yule/">網(wǎng)站制作學(xué)習(xí)網(wǎng)娛樂網(wǎng)址</opiton>
<option value="http://www.ynpxrz.com/tool/">網(wǎng)站制作學(xué)習(xí)網(wǎng)工具網(wǎng)址</opiton>
</select>
js代碼如下:
var foraspobj = document.getElementById("forasp_cn")
var option_num = foraspobj.options.length;//獲取option的個數(shù),目前輸出3
Dom下獲取select的option取顯示文本值和value值
var option_text1 = foraspobj.options[0].firstChild.nodeValue;//輸出"網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址"
var option_value1 = foraspobj.options[0].getAttribute("value");//輸出"http://www.ynpxrz.com/"
Bom下獲取select的option顯示文本值和value值
var option_text1 = foraspobj.option[0].text;//輸出同上
var option_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);//輸出"網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址回車http://www.ynpxrz.com/"
break;
}
}
3.修改select的option的value和text.
假設(shè)把第一個 text顯示值修改為http://www.ynpxrz.com/ value值修改為網(wǎng)站制作學(xué)習(xí)網(wǎng)
Dom修改代碼如下:
foraspobj.options[0].firstChild.nodeValue= "http://www.ynpxrz.com";
foraspobj.options[0].setAttribute("value","網(wǎng)站制作學(xué)習(xí)網(wǎng)");
Bom修改代碼如下:
foraspobj.options[0].text = "http://www.ynpxrz.com";
foraspobj.options[0].value = "網(wǎng)站制作學(xué)習(xí)網(wǎng)";
4.添加選項,通過函數(shù)來添加select的option選項
t表示text值,v表示value值
var temp_option = document.createElement("option");//創(chuàng)建臨時option
temp_option.appendChild(document.createTextNode("新增加內(nèi)容"));//給option創(chuàng)建子文本節(jié)點
temp_option.setAttribute("value","新增加值");//給opiton賦值
foraspobj.appendChild(temp_option)//將option附加到父類中
5.刪除選項,刪除select的option,直接用對應(yīng)的option對象等于空即可
比如刪除最后一個選項
if(foraspobj.options.length>0){foraspobj.options[foraspobj.options.length-1]=null;}