Heim > Artikel > Web-Frontend > Einfache JS-Methode zum Implementieren der sekundären Linkage-Auswahl-Plug-in-Javascript-Fähigkeiten der Stadt

Einfache JS-Methode zum Implementieren der sekundären Linkage-Auswahl-Plug-in-Javascript-Fähigkeiten der Stadt

WBOYOriginal: 2016-05-16 15:44:091095Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie das sekundäre Linkage-Auswahl-Plug-in der Stadt einfach mit JS implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das von js implementierte Stadtverknüpfungsmenü wird häufig im Internet vorgestellt. Der Prototyp dieses Stadtauswahlmenüs basiert hauptsächlich auf JavaScript wie Arrays und Schleifen. Dieser Effekt dient nur zur Demonstration der Implementierung. Die darin enthaltenen Daten sind unvollständig. Sie können sie bei Bedarf selbst hinzufügen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>Js城市二级联动选择插件</title>
<script>
var citys=new Array(
new Array("南京","淮安","扬州","常州",'其它'),
new Array("北京"),
new Array("天津"),
new Array("上海"),
new Array("其它")
);
function scity(pname,cname){
var province=['江苏省','北京','天津','上海','其它'];
document.write('<select id="pro" onchange="selectc(this)" name="'+pname+'">');
document.write('<option value="">--选择省份--</option>')
for(var i=0;i<province.length;i++){
 document.write('<option value="'+province[i]+'">'+province[i]+'</option>');
}
document.write('</select>');
document.write('<select id="city" name="'+cname+'">');
document.write('<option value="">--选择城市--</option>');
document.write('</select>');
selectc(document.getElementById("pro"));
}
function selectc(pobj){
  var index=pobj.selectedIndex-1;
   var cobj=document.getElementById("city");
   cobj.innerHTML='';
   if(index>=0){
   for(var i=0;i<citys[index].length;i++){
   var option=document.createElement("option");
   var text=citys[index][i];
   option.value=text;
   option.innerHTML=text;
   cobj.appendChild(option);
   }
   }else{
   var option=document.createElement("option");
   option.value="";
   option.innerHTML="--选择城市--";
   cobj.appendChild(option);
   }
}
</script>
</head>
<body>
<script>
 scity('p','c');
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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-Text sphärische Vergrößerungseffektcode-Sharing_Javascript-KenntnisseNächster Artikel：JS-Text sphärische Vergrößerungseffektcode-Sharing_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen