Home > Web Front-end > JS Tutorial > body text

A brief discussion on the Option object in the drop-down menu_javascript skills

WBOY
Release: 2016-05-16 15:59:52
Original
1412 people have browsed it

1. Create Option object

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

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

2.options attribute

 2.1 select.options returns a collection of Option objects under the select tag

3. Clear the drop-down menu

 3.1 Use for loop to delete, pay attention to the dynamic changes of the array length

 3.2 select.options.length = 0;

4. Application

<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> 
Copy after login

1. Dynamically create select

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

2. Add option option

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

3. Delete all options option

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

4. Delete an option option

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

5. Get the value of option

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

6. Get the text of option

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

7. Modify option option

var obj=document.getElementById('mySelect'); 
 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
 
var val = obj.options[index]=new Option("新文本","新值"); 
Copy after login

8. Delete select

function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
} 
Copy after login
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return document.getElementById(id) 
} 
 
function show() 
{ 
var selectObj=$("area") 
var myOption=document.createElement("option") 
myOption.setAttribute("value","10") 
myOption.appendChild(document.createTextNode("上海")) 
 
var myOption1=document.createElement("option") 
myOption1.setAttribute("value","100") 
myOption1.appendChild(document.createTextNode("南京")) 
 
selectObj.appendChild(myOption) 
selectObj.appendChild(myOption1) 
 
} 
 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
 
if(val==10) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var sh=document.createElement("select") 
sh.add(new Option("浦东新区","101")) 
sh.add(new Option("黄浦区","102")) 
sh.add(new Option("徐汇区","103")) 
sh.add(new Option("普陀区","104")) 
$("context").appendChild(sh) 
 
} 
 
if(val==100) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var nj=document.createElement("select") 
nj.add(new Option("玄武区","201")) 
nj.add(new Option("白下区","202")) 
nj.add(new Option("下关区","203")) 
nj.add(new Option("栖霞区","204")) 
$("context").appendChild(nj) 
} 
} 
 
function calc() 
{ 
var x=$("context").childNodes.length-1; 
alert(x) 
 
} 
 
function remove() 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
} 
</script> 
<body> 
 
<div id="context"> 
<select id="area" on  
change="choice()"> 
</select> 
</div> 
<input type=button value="显示" onclick="show()"> 
<input type=button value="计算结点" onclick="calc()"> 
<input type=button value="删除" onclick="remove()"> 
</body> 
</html> 
Copy after login

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template