suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung von Beispielen für Implementierungsmethoden von Javascript-Provinz- und Stadtkaskadenfunktionen_Javascript-Fähigkeiten

Detaillierte Erläuterung von Beispielen für Implementierungsmethoden von Javascript-Provinz- und Stadtkaskadenfunktionen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:36:041330Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode der JavaScript-Kaskadierungsfunktion für Provinzen und Städte. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Erste Implementierungsmethode: 

<html>
<head>
<script language="javascript">
 function changecity(){
 var province = document.form1.selprovince.value;
 var newoption1,newoption2;
 switch(province){
  case "四川省":
  newoption1 = new Option("成都市", "chengdu");
  newoption2 = new Option("绵阳市", "mianyang");
  break;
   case "湖北省" : 
  newoption1= new Option("武汉市","wuhan");
  newoption2= new Option("襄樊市","xiangfan");
  break;
   case "山东省" : 
   newoption1= new Option("青岛市","qingdao");
   newoption2= new Option("烟台市","yantai");
  break;  
 }
 document.form1.selcity.options.length=0;
 document.form1.selcity.options.add(newoption1);
 document.form1.selcity.options.add(newoption2);
 }
</script>
</head>
<form name="form1" action="" method="post">
 <select name="selprovince" onchange="changecity()">
 <option>--请选择开户帐号的省份--</option>
 <OPTION value="四川省">四川省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="湖北省">湖北省</OPTION>
 </select>
 <select name="selcity">
 <option>--请选择开户帐号的城市--</option>
 </select>
</form>
</html>

Verbesserte Implementierungsmethode: 

<html>
<head>
<script language="javascript">
 function changecity(){
 var cityList = new Array();
 cityList[0]=['成都', '绵阳', '德阳', '自贡'];
 cityList[1]=['济南', '青岛', '淄博', '枣庄'];
 cityList[2]=['武汉', '宜昌', '荆州', '襄樊'];
 var pindex = document.form1.selprovince.selectedIndex-1;
 var newoption1;
 document.form1.selcity.options.length = 0;
 for(var j in cityList[pindex]){
  newoption1 = new Option(cityList[pindex][j], cityList[pindex][j]);
  document.form1.selcity.options.add(newoption1);
 }
 }
</script>
</head>
<form name="form1" action="" method="post">
 <select name="selprovince" onchange="changecity()">
 <option>--请选择省份--</option>
 <OPTION value="四川省">四川省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="湖北省">湖北省</OPTION>
 </select>
 <select name="selcity">
 <option>--请选择城市--</option>
 </select>
</form>
</html>

Verbesserungsmethode 2: 

<html>
<head>
<script language="javascript">
 function citychange(){
 var cityList = new Array();
 cityList['辽宁省'] = ['沈阳','鞍山','大连'];
 cityList['山东省'] = ['济南','烟台','蓬莱'];
 cityList['山西省'] = ['太原','大同','平遥'];
 var pindex = document.form1.selprovince.value;
 var newoption1;
 document.form1.selcity.options.length = 0;
 for(var i in cityList[pindex]){
  newoption1 = new Option(cityList[pindex][i],cityList[pindex][i]);
  document.form1.selcity.options.add(newoption1);
 }
 }
</script>
</head>
<form action="" name="form1" method="post">
 <select name="selprovince" onchange="citychange()">
 <option>请选择省份</option>
 <OPTION value="辽宁省">辽宁省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="山西省">山西省</OPTION>
 </select>
 <select name="selcity">
 <option>请选择城市</option>
 </select>
</form>
</html>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

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：JS personalisierter Menüeffektcode basierend auf Mootools_javascript-FähigkeitenNächster Artikel：JS personalisierter Menüeffektcode basierend auf Mootools_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen