下拉菜单中的Option对象

Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中 标签每出现一次,一个 Option 对象就会被创建。您可通过表单的 elements[] 数组访问一个 Option 对象,或者通过使用 document.getElementById()。

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.应用




functionnumber(){

varobj = 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);删除功能

}

1.动态创建select

functioncreateSelect(){

    varmySelect = document.createElement("select"); 

mySelect.id = "mySelect"; 

document.body.appendChild(mySelect);

}

2.添加选项option

functionaddOption(){

     //根据id查找对象,

varobj=document.getElementById('mySelect');

      //添加一个选项

obj.add(newOption("文本","值"));  //这个只能在IE中有效

obj.options.add(newOption("text","value")); //这个兼容IE与firefox

}

3.删除所有选项option

functionremoveAll(){

varobj=document.getElementById('mySelect');

obj.options.length=0;  

 }

4.删除一个选项option

functionremoveOne(){

varobj=document.getElementById('mySelect');

      //index,要删除选项的序号,这里取当前选中选项的序号

    varindex=obj.selectedIndex;

obj.options.remove(index); 

}

5.获得选项option的值

varobj=document.getElementById('mySelect');

varindex=obj.selectedIndex; //序号,取当前选中选项的序号

varval = obj.options[index].value;

6.获得选项option的文本

varobj=document.getElementById('mySelect');

varindex=obj.selectedIndex; //序号,取当前选中选项的序号

varval = obj.options[index].text;

7.修改选项option

varobj=document.getElementById('mySelect');

varindex=obj.selectedIndex; //序号,取当前选中选项的序号

varval = obj.options[index]=newOption("新文本","新值");

8.删除select

functionremoveSelect(){

varmySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}


http://www.w3.org/TR/html4/strict.dtd">

function$(id)

{

returndocument.getElementById(id)

}

functionshow()

{

varselectObj=$("area")

varmyOption=document.createElement("option")

myOption.setAttribute("value","10")

myOption.appendChild(document.createTextNode("上海"))

varmyOption1=document.createElement("option")

myOption1.setAttribute("value","100")

myOption1.appendChild(document.createTextNode("南京"))

selectObj.appendChild(myOption)

selectObj.appendChild(myOption1)

}


functionchoice()

{

varindex=$("area").selectedIndex;

varval=$("area").options[index].getAttribute("value")


if(val==10)

{

vari=$("context").childNodes.length-1;

varremobj=$("context").childNodes[i];

remobj.removeNode(true)

varsh=document.createElement("select")

sh.add(newOption("浦东新区","101"))

sh.add(newOption("黄浦区","102"))

sh.add(newOption("徐汇区","103"))

sh.add(newOption("普陀区","104"))

$("context").appendChild(sh)


}


if(val==100)

{

vari=$("context").childNodes.length-1;

varremobj=$("context").childNodes[i];

remobj.removeNode(true)

varnj=document.createElement("select")

nj.add(newOption("玄武区","201"))

nj.add(newOption("白下区","202"))

nj.add(newOption("下关区","203"))

nj.add(newOption("栖霞区","204"))

$("context").appendChild(nj)

}

}

functioncalc()

{

varx=$("context").childNodes.length-1;

alert(x)

}

functionremove()

{

vari=$("context").childNodes.length-1;

varremobj=$("context").childNodes[i];

remobj.removeNode(true)

}

change="choice()">

你可能感兴趣的:(下拉菜单中的Option对象)