Heim >Web-Frontend >HTML-Tutorial >Detaillierte Beschreibung der HTML-Auswahloption
Detaillierte Beschreibung der HTML-Auswahloption
- 高洛峰Original
- 2017-03-13 18:18:172087Durchsuche
Dieser Artikel stellt die detaillierte Erklärung der HTML-Auswahloption vor
JavascriptDetaillierte Erklärung von HTML (Auswahloption)
1. Grundverständnis:
var e = document.getElementById("selectId");
e. options= new Option("text","value");
//Erstellen Sie ein Optionsobjekt, d. h. erstellen Sie einen oder mehrere a98f991a265eceb0ca82d509fb3f2da0text4afa15d3069109ac30911f04c56f3338
/ im
1:options[ ]-Array speichern kann Attribute:
Längenattribut---------Längenattribut
selectedIndex-Attribut--------Der Text im aktuell ausgewählten Feld Indexwert, Dieser Indexwert wird automatisch vom Speicher (0,1,2,3...) entsprechend (dem ersten Textwert, dem zweiten Textwert, dem dritten Textwert, dem vierten Textwert ...) zugewiesen. ....)
2: Attribute einer einzelnen Option (---obj.options[obj.selecedIndex] ist ein angegebenes 5a07473c87748fb1bf73f23d45547ab8-Tag, das ein-- - ist)
Textattribut---------Text zurückgeben/angeben
Wertattribut------Wert zurückgeben/angeben, dasselbe wie 76379f8352ec422eb1994b6f5d881034 Konsistent.
Index-Attribut ------- gibt den Index zurück,
ausgewähltes Attribut ------- gibt zurück/gibt an, ob das Objekt ausgewählt ist kann das ausgewählte Element dynamisch ändern
defaultSelected attribute-----gibt zurück, ob das Objekt standardmäßig ausgewählt ist. wahr/falsch.
3: Optionsmethode
Fügen Sie ein5a07473c87748fb1bf73f23d45547ab8-Tag hinzu-----obj.options.add(new("text","value"));ba61e18a2ef20b57f8998b31d6055e29
Ein 5a07473c87748fb1bf73f23d45547ab8-Tag entfernen-----obj.options.remove(obj.selectedIndex)6636bd7e78ba240e9fde5daa8b2290ac
Text eines 5a07473c87748fb1bf73f23d45547ab8-Tags abrufen ---obj.options[obj.selectedIndex].textefd15cfe0cd7d72f74962f8046262560
Ändern Sie den Wert eines 5a07473c87748fb1bf73f23d45547ab8 -----obj.options[obj.selectedIndex]=new Option (" neuer Text, „neuer Wert“)198504cf4abed8454ddaa44cf2ba32b7
Alle 5a07473c87748fb1bf73f23d45547ab8-Tags entfernen -----obj.options.length = 0
Holen Sie sich eine< ;option>The Wert des Tags-----obj.options[obj.selectedIndex].value
Hinweis:
a: Die obige Methode ist wie diese Art von Methode obj.options .function geschrieben () wird aufgrund der Kompatibilität unter IE und FF nicht als obj.funciton geschrieben. Beispielsweise ist obj.add() nur im IE gültig.
b:option in obj.option Es ist keine Großschreibung erforderlich. Die Option in der neuen Option muss großgeschrieben werden
2. Anwendung
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
1a24b17f85e15c83fc29b7760e40bfcb >function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat Eat","4" );/ /Ändern Sie den Wert der aktuell ausgewählten Option
//obj.options.add(new Option("My Eat","4"));Fügen Sie eine weitere Option hinzu
//alert (obj.selectedIndex);/ /Zeige die Seriennummer an, die Option wird von selbst gesetzt
//obj.options[obj.selectedIndex].text = „Mein Essen“; ändere den Wert
//obj.remove(obj .selectedIndex); Funktion löschen
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c2918509ec73c25471fc547715e887cb
< ;option>My Tasche4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8Mein Notizbuch4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8Mein Öl4afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab8 Meine Last4afa15d3069109ac30911f04c56f3338
12a444272d549ac5add23bac6d2d3de6
83ec78390f1ca2c21b19c5fd20b04eff36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
var obj=document.getElementById('mySelect');
obj.add(new Option("text","value")); //Dies ist nur im IE gültig
obj.options.add(new Option("text","value")); //Dies ist kompatibel mit IE und Firefox
}
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4. Löschen Sie eine Optionsoption
function removeOne(){
var obj=document.getElementById('mySelect');
//index, die Seriennummer der zu verwendenden Option gelöscht, nimm hier die Seriennummer der aktuell ausgewählten Option
var index=obj.selectedIndex;
obj.options.remove(index);
}
5 der Wert der Option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Seriennummer, nimm die Seriennummer der aktuell ausgewählten Option
var val = obj.options [index].value;
6. Holen Sie sich den Text der Option option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Seriennummer, nimm die Seriennummer der aktuell ausgewählten Option
var val = obj.options[index].text;
7. Option ändern option
var obj=document.'mySelect');
var index=obj.selectedIndex; //Seriennummer, nehmen Sie die Seriennummer der aktuell ausgewählten Option
var val = obj.options[index]=new Option(" Neuer Text", "neuer Wert");
8. {
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>Basierend auf diesen Dingen habe ich verwendete JQEURY AJAX+JSON
, um eine kleine Funktion wie folgt zu implementieren:JS-Code: (nur der Code im Zusammenhang mit SELECT wurde übernommen)
/**
* @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));
}
}
}
HTML-Code:
<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>
Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung der HTML-Auswahloption. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!