首页 > 语言 > JavaScript > 正文

浅谈下拉菜单中的Option对象

2024-05-06 14:42:06
字体:
来源:转载
供稿:网友

1.创建Option对象

  1.1 var optionEle1 = document.createElement('option');

  1.2 var optionEle2 = new Option(text, value, defaultSelected, selected);

2.options属性

  2.1 select.options返回select标签下面的Option对象的集合

3.清空下拉菜单

  3.1 利用for循环删除,注意数组长度的动态变化

  3.2 select.options.length = 0;

4.应用

<html> <head> <script language="javascript"> function number(){ 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);删除功能 } </script> </head> <body> <select id="mySelect"> <option>我的包包</option> <option>我的本本</option> <option>我的油油</option> <option>我的担子</option> </select> <input type="button" name="button" value="查看结果" onclick="number();"> </body> </html> 

1.动态创建select

function createSelect(){      var mySelect = document.createElement("select");  mySelect.id = "mySelect";  document.body.appendChild(mySelect); } 

2.添加选项option

function addOption(){       //根据id查找对象, var obj=document.getElementById('mySelect');        //添加一个选项 obj.add(new   Option("文本","值"));  //这个只能在IE中有效 obj.options.add(new Option("text","value")); //这个兼容IE与firefox } 

3.删除所有选项option

function removeAll(){ var obj=document.getElementById('mySelect');  obj.options.length=0;     } 

4.删除一个选项option

function removeOne(){ var obj=document.getElementById('mySelect');        //index,要删除选项的序号,这里取当前选中选项的序号      var index=obj.selectedIndex; obj.options.remove(index);  } 

5.获得选项option的值

var obj=document.getElementById('mySelect');  var index=obj.selectedIndex; //序号,取当前选中选项的序号  var val = obj.options[index].value; 

6.获得选项option的文本

var obj=document.getElementById('mySelect');  var index=obj.selectedIndex; //序号,取当前选中选项的序号  var val = obj.options[index].text; 

7.修改选项option

var obj=document.getElementById('mySelect');  var index=obj.selectedIndex; //序号,取当前选中选项的序号  var val = obj.options[index]=new Option("新文本","新值");             
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选