JavaScript Option處理

一、基礎理解:

var e = document.getElementById("selectId");

e.options = new Option("文本", "值");    //創建一個option對象,即在<select>標籤中創建一個或多個<option value="值">文本</option>。options是一個數組,裏面可存放多個<option value="值">文本</option>標籤。

 

1、options數組的屬性:

length -------長度屬性

selectedIndex ------ 當前被選中的文本的索引值,此索引值是內存自動分配的(0,1,2,3....)對應(第一個文本值,第二個文本值,第三個文本值,第四個文本值.......)

 

2、單個option的屬性(即obj.options[obj.selectedIndex]是指定的某個<option>標籤):

text ===== 返回/指定文本

value =====返回/指定文本,與<option value="...">一致

index ======返回下標

selected======返回/指定該對象是否被選中,指定true or false可動態改變選中項

defaultSelected =====返回該對象默認是否被選中,true/false

 

3、option的方法:

增加一個<option>標籤======obj.options.add(new("文本", "值"))

刪除一個<option>標籤======obj.options.remove(obj.selectedIndex);

獲取一個<option>標籤======obj.options[obj.selectedIndex].text ;

修改一個<option>標籤======obj.options[obj.selectedIndex] = new Option("新文本", "值") ;

刪除所有<option>標籤======obj.options.length = 0 ;

獲取一個<option>標籤的值====obj.options[obj.selectedIndex].value ;

 

注意:

obj.option中的option不需要大寫

new Option中的option需要大寫

 

二、示例:

<html>    

<head>    

<script language="javascript">    

function chk(){    

var obj = document.getElementById("mySelect");    

        obj.options[obj.selectedIndex] = new Option("我的測試","4");//改變當前選中的文本 

        //obj.options.add(new Option("我的測試","4"));//再添加一個option    

        //alert(obj.selectedIndex);//顯示序號,option自己設置的    

     // obj.options[obj.selectedIndex].text = "我的測試";//更改值    

     //obj.remove(obj.selectedIndex);逐個刪除    

     //obj.options.length = 0;//刪除全部 

 

     //t = obj.options[obj.selectedIndex].text;//獲取文本 

     //alert(t); 

 

     //v = obj.options[obj.selectedIndex].value;//獲取選中文本的值 

    // alert(v); 

}    

</script>    

</head>    

<body>    

<select id="mySelect">    

         <option value="1111">我的1111</option>    

         <option value="2222">我的2222</option>    

         <option value="3333">我的3333</option>    

         <option value="4444">我的4444</option>    

</select>    

<input type="button" name="button" value="查看結果" οnclick="javascript:chk();">    

</body>    

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章