`

javascript select option 总结

阅读更多

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>


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics