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).

舉例:

<select id=forasp_cn name = forasp_cn>

<option value=http://20hl.cn/ selected>網(wǎng)站制作學(xué)習(xí)網(wǎng)網(wǎng)址</opiton>

<option value=http://20hl.cn/yule/>網(wǎng)站制作學(xué)習(xí)網(wǎng)娛樂(lè)網(wǎng)址</opiton>

<option value=http://20hl.cn/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的個(gè)數(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://20hl.cn/

bom下獲取select的option顯示文本值和value值

var option_text1 = foraspobj.option[0].text;//輸出同上

var option_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)址回車(chē)http://20hl.cn/

break;

}

}

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

假設(shè)把第一個(gè) text顯示值修改為http://20hl.cn/ value值修改為網(wǎng)站制作學(xué)習(xí)網(wǎng)

dom修改代碼如下:

代碼如下:

foraspobj.options[0].firstchild.nodevalue= http://20hl.cn;

foraspobj.options[0].setattribute(value,網(wǎng)站制作學(xué)習(xí)網(wǎng));

bom修改代碼如下:

代碼如下:

foraspobj.options[0].text = http://20hl.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值

var temp_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附加到父類(lèi)中

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;}