一個小例子：
| 代碼如下 | |
<form name="selectform" > |
|
首先取得option的value值，相對簡單，在select標簽上沒有value屬性，option的value值就是select的value。
所以求得select value的值的方法如下
| 代碼如下 | |
var ss = document.selectform.test; var value= ss.value;//1或者2。。。 |
|
很多ide提示在select和option上面都沒有selectIndex的屬性提示，但是js能通過selectIndex這個屬性獲取選擇項的相關(guān)信息
可能是因為selectIndex是一個動態(tài)的列，它總是跟隨selected屬性改變，所以ide才沒有自動提示獲取select text的值方法如下：
| 代碼如下 | |
var ts1 = ss.options[ss.selectedIndex].text;//第一或者第二。。。 |
|
還可以用innerText獲�。�
| 代碼如下 | |
var ts2 = ss.options[ss.selectedIndex].innerText;//第一或者第二。。。 |
|
可以打印下看看
| 代碼如下 | |
alert(ts1); |
|
常用的關(guān)于 select 用法。
| 代碼如下 | |
1.動態(tài)創(chuàng)建select function createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加選項option function addOption(){ //根據(jù)id查找對象， var obj=document.getElementByIdx_x('mySelect'); //添加一個選項 obj.add(new Option("文本","值")); //這個只能在IE中有效 obj.options.add(new Option("text","value")); //這個兼容IE與firefox } 3.刪除所有選項option function removeAll(){ var obj=document.getElementByIdx_x('mySelect'); obj.options.length=null; } 4.刪除一個選項option function removeOne(){ var obj=document.getElementByIdx_x('mySelect'); //index,要刪除選項的序號，這里取當前選中選項的序號 var index=obj.selectedIndex; obj.options.remove(index); } 5.獲得選項option的值 var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index].value; 6.獲得選項option的文本 var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index].text; 7.修改選項option var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index]=new Option("新文本","新值"); 8.刪除select function removeSelect(){ var mySelect = document.getElementByIdx_x("mySelect"); mySelect.parentNode.removeChild(mySelect); } //1.判斷是否存在指定value的Item function ExistValue(obj,value){ for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ return true; } } return false; } //2.加入一個Item function AddItem(obj,text,value){ var varItem = new Option(text,value); obj.options.add(varItem); } //3.刪除值為value的所有Item function RemoveItems(obj,value){ for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ obj.remove(i); } } } //4.刪除某一個index的選項 function RemoveItem(obj,index){ obj.remove(index); } //5.更新第index項的value和text function UpdateItem(obj,index,value,text){ obj.options[index].value = value; obj.options[index].text = text; } //6.設(shè)置select中指定text的第一個Item為選中 function SelectItemByText(obj,text){ var isExit = false; for(var i=0;i<obj.options.length;i++){ if(obj.options[i].text == text){ obj.options[i].selected = true; return true; } } return false; } //7.設(shè)置select中指定value的第一個Item為選中 function SelectItemByValue(obj,value){ var isExit = false; for(var i=0;i<obj.options.length;i++){ if(obj.options[i].value == value){ obj.options[i].selected = true; return true; } } return false; } //8.得到當前選中項的value，index,text function GetValue(obj){ return obj.value; } //9.得到當前選中項的index function GetIndex(obj){ return obj.selectedIndex; } //10.得到當前選中項的text function GetText(obj){ return obj.options[obj.selectedIndex].text; } //11.清空所有選項 function Clear(obj){ obj.options.length = 0; } |
|
