Une brève discussion sur l'objet Option dans le menu déroulant_compétences javascript-js tutoriel-php.cn

Une brève discussion sur l'objet Option dans le menu déroulant_compétences javascript

WBOY

Libérer： 2016-05-16 15:59:52

original

1397 Les gens l'ont consulté

1. Créer un objet Option

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

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

Attribut 2.options

　2.1 select.options renvoie une collection d'objets Option sous la balise select

3. Effacez le menu déroulant

　3.1 Utilisez la boucle for pour supprimer, faites attention aux changements dynamiques de la longueur du tableau

　3.2 select.options.length = 0;

4. Candidature

<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>

Copier après la connexion

1. Créer dynamiquement une sélection

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

Copier après la connexion

2. Ajouter une option

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

Copier après la connexion

3. Option Supprimer toutes les options

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

Copier après la connexion

4. Supprimer une option

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

Copier après la connexion

5. Obtenez la valeur de l'option

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

Copier après la connexion

6. Obtenez le texte de l'option

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

Copier après la connexion

7. Modifier l'option

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

Copier après la connexion

8. Supprimer la sélection

function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
}

Copier après la connexion

<!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>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.