javascript select 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 ="查看结果"   onclick ="javascript:chk();" >    
</body>    
</html>

转载于:https://www.cnblogs.com/kungfupanda/archive/2010/06/14/1758244.html