Maison > Article > interface Web > Description détaillée de l'option de sélection HTML
Description détaillée de l'option de sélection HTML
- 高洛峰original
- 2017-03-13 18:18:172068parcourir
Cet article présente l'explication détaillée de l'option de sélection HTML
javascriptexplication détaillée du HTML (option de sélection)
1 Compréhension de base :
var e =
document.getElementById("selectId");
e. options=
nouveau Option("text","value");
//Créer une option
objet, c'est-à-dire créer un ou plusieurs a98f991a265eceb0ca82d509fb3f2da0text4afa15d3069109ac30911f04c56f3338
/ dans le
attribut length---------attribut lengthattribut selectedIndex-------------Le texte dans la case actuellement sélectionnée Valeur d'index, cette valeur d'index est automatiquement allouée par la mémoire (0,1,2,3...) correspondant à (la première valeur de texte, la deuxième valeur de texte, la troisième valeur de texte, la quatrième valeur de texte.... ....)
2 : Attributs d'une seule option (---obj.options[obj.selecedIndex] est une balise 5a07473c87748fb1bf73f23d45547ab8 spécifiée, qui est un-- -)
attribut de texte---------Retourner/spécifier le texte
attribut de valeur------Renvoyer/spécifier la valeur, identique à
attribut index ------- renvoie l'indice,
attribut selected ------- renvoie/spécifie si l'objet est sélectionné En spécifiant vrai ou faux, vous. peut modifier dynamiquement l'élément sélectionné
attribut defaultSelected -----renvoie si l'objet est sélectionné par défaut. vrai/faux.
3 : méthode d'option
Ajouter une balise5a07473c87748fb1bf73f23d45547ab8-----obj.options.add(new("text","value"));ba61e18a2ef20b57f8998b31d6055e29
Supprimer une balise 5a07473c87748fb1bf73f23d45547ab8-----obj.options.remove(obj.selectedIndex)6636bd7e78ba240e9fde5daa8b2290ac
Obtenir le texte d'une balise 5a07473c87748fb1bf73f23d45547ab8 ---obj.options[obj.selectedIndex].textefd15cfe0cd7d72f74962f8046262560
Modifier la valeur d'une balise 5a07473c87748fb1bf73f23d45547ab8 -----obj.options[obj.selectedIndex]=new Option (" nouveau texte","nouvelle valeur")954430d3b7b502c0c9da5c1b62093ebc
Supprimer toutes les balises 5a07473c87748fb1bf73f23d45547ab8 -----obj.options.length = 0
Obtenir une5a07473c87748fb1bf73f23d45547ab8Le valeur de l'étiquette -----obj.options[obj.selectedIndex].value
Remarque :
a : La méthode ci-dessus est écrite comme ce type de méthode obj.options .function () n'est pas écrit comme obj.funciton en raison de la compatibilité sous IE et FF. Par exemple, obj.add() n'est valide que dans IE
b:option dans obj.option Aucune majuscule n'est requise, l'option dans la nouvelle option doit être en majuscule
2. Application
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
1a24b17f85e15c83fc29b7760e40bfcb >numéro de fonction(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat Eat","4" );/ /Modifier la valeur de celle actuellement sélectionnée
//obj.options.add(new Option("My Eat","4"));Ajouter une autre option
//alert (obj.selectedIndex);/ /Afficher le numéro de série, l'option se définit toute seule
//obj.options[obj.selectedIndex].text = "Ma nourriture"; modifier la valeur
//obj.remove(obj .selectedIndex); Supprimer la fonction
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c2918509ec73c25471fc547715e887cb
5a07473c87748fb1bf73f23d45547ab8Mon sac4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8Mon carnet4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8Mon huile4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8 Mon fardeau4afa15d3069109ac30911f04c56f3338
12a444272d549ac5add23bac6d2d3de6
b1b0928c50ce34555144554428eb4ea0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
1. Créer dynamiquement la fonction select
createSelect(){
mySelect.id = "mySelect";
document.body.appendChild(mySelect);}
2 .Ajouter une option
function addOption() {
obj.add(new Option("text","value")); //Ceci n'est valable que dans IE
obj.options.add(new Option("text"," value")); // Ceci est compatible avec IE et Firefox>
3.
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4. Supprimer une option option
function removeOne(){
var obj=document.getElementById('mySelect');
//index, le numéro de série de l'option à supprimé, prenez ici Le numéro de série de l'option actuellement sélectionnée
var index=obj.selectedIndex;
obj.options.remove(index); la valeur de l'option
var mySelect = document.getElementById("mySelect");
mySelect .parentNode.removeChild(mySelect);}
<!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>
<p id="context">
<select id="area" on
change="choice()">
</select>
</p>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>JSON pour implémenter une petite fonction comme suit :
Code JS : (seul le code lié à SELECT a été pris)
/**
* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
* @prarm selectId 下拉列表的ID
* @prarm method 要调用的方法名称
* @prarm temp 此处存放软件ID
* @prarm url 要跳转的地址
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: url,//要访问的后台地址
data: "method=" + method+"&temp="+temp,//要发送的数据
success: function(msg){//msg为返回的数据，在这里做数据绑定
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description 将JSON数据转换成HTML数据格式
* @prarm selectId 下拉列表的ID
* @prarm nodeArray 返回的JSON数组
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var tempSelect=$j("#"+selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//create select Option
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//put Option to select
tempSelect.append(tempOption);
}
// 获取退化构件列表
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description 清空下拉列表的值
* @prarm selectId 下拉列表的ID
* @prarm index 开始清空的下标位置
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//长度是在变化的，因为必须重新获取
length=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description 获取退化构件列表
* @prarm selectId1 引用软件下拉列表的ID
* @prarm selectId2 退化构件下拉列表的ID
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//引用软件下拉列表
var obj2=document.getElementById(selectId2);//退化构件下拉列表
var len=obj1.options.length;
//当引用软件列表长度等于1时返回，不做操作
if(len==1){
return false;
}
//清空下拉列表的值，两种方式都可以
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option= obj1.options[i];
//引用软件被选中项不加入
if(i!=obj1.selectedIndex){
//克隆OPTION并添加到SELECT中
obj2.appendChild(option.cloneNode(true));
}
}
}Code HTML :
<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1> <tr> <td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件：</td> <td class="Search_content_82"> <input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" > <input name="yyrjDm" id="yyrjDm" type="hidden" > <input type="button" class="Search_button_select" onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择..."> </td> </tr> <tr> <td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版：</td> <td class="Search_content" id="yyfb"> <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> </select> </td> </tr> <tr> <td class="Search_item">退化构件：</td> <td class="Search_content" id="thgj"> <select name="thgjDm" style="width:160" id="thgjDm"> <option value="-1" selected>无</option> </select> </td> </tr> </TABLE>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!