Méthode simple JS pour mettre en œuvre les compétences du plug-in_javascript de sélection de liens secondaires de ville-js tutoriel-php.cn

Méthode simple JS pour mettre en œuvre les compétences du plug-in_javascript de sélection de liens secondaires de ville

WBOY

Libérer： 2016-05-16 15:44:09

original

1201 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter simplement le plug-in de sélection de liens secondaires de la ville à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le menu de sélection de liens de ville implémenté par js est souvent vu sur Internet. Je ne le présenterai pas en détail. Le prototype de ce menu de sélection de ville est basé sur Select et est principalement implémenté en JavaScript. Il est réalisé à l'aide de techniques de base. tels que des tableaux et des boucles. Cet effet sert simplement à montrer comment l'implémenter. Les données à l'intérieur sont incomplètes. Vous pouvez l'ajouter vous-même si nécessaire.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.