suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5-Optionsattribut: So verwenden Sie das Optionsattribut, um eine kaskadierende Dropdown-Liste zu implementieren

HTML5-Optionsattribut: So verwenden Sie das Optionsattribut, um eine kaskadierende Dropdown-Liste zu implementieren

不言
不言Original
2018-08-09 14:45:084388Durchsuche

Dieser Artikel stellt Ihnen das Optionsattribut von HTML5 vor: Wie Sie das Optionsattribut zum Implementieren einer kaskadierenden Dropdown-Liste verwenden. Ich hoffe, dass es hilfreich ist Du. 

<!DOCTYPE>
<html>
<head>
<title>级联下拉列表</title>
<meta charset="UTF-8">
</head>
<body onload="load()">
<p>
<select class=&#39;prov&#39; id=&#39;prov&#39; onchange=&#39;changeCity()&#39;>
<option value=&#39;&#39;>--请选择省--</option>
</select>
<select class=&#39;city&#39; id=&#39;city&#39;>
<option value=&#39;&#39;>--请选择市--</option>
</select>
</p>
<script>
var province=document.getElementById("prov");
var city=document.getElementById("city");
var arr_prov=new Array(new Option("--请选择省--",&#39;&#39;),new Option("湖南","hn"),new Option("广东","gd"));
var arr_city=new Array();
arr_city[0]=new Array(new Option("--请选择市--",&#39;&#39;));
arr_city[1]=new Array(new Option("长沙",&#39;cs&#39;),new Option("娄底",&#39;ld&#39;),new Option("永州",&#39;yz&#39;));
arr_city[2]=new Array(new Option("广州",&#39;gz&#39;),new Option("深圳",&#39;sz&#39;)); //动态载入所有省份
function load(){ for(var i=0;i<arr_prov.length;i++){ province.options[i]=arr_prov[i]; } } //选中省份之后，根据索引动态载入相应城市 function changeCity(){
//清空上次的选项
city.options.length=0; //获取省一级的下拉列表选中的索引
var index=province.selectedIndex;
for(var i=0;i<arr_city[index].length;i++){
city.options[i]=arr_city[index][i];
} }
</script>
</body>
</html>

Empfohlene verwandte Artikel:

Benutzerdefinierte HTML5-Attribute: So erhalten Sie benutzerdefinierte Attributwerte (mit Code)

Wie das Select-Objekt von HTML auf das Option-Objekt wirkt

Das obige ist der detaillierte Inhalt vonHTML5-Optionsattribut: So verwenden Sie das Optionsattribut, um eine kaskadierende Dropdown-Liste zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 html select 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Änderungen in der HTML5-Seitenstruktur und dem Hinzufügen und Löschen von TagsNächster Artikel：Zusammenfassung der Änderungen in der HTML5-Seitenstruktur und dem Hinzufügen und Löschen von Tags

In Verbindung stehende Artikel

Mehr sehen