recherche

Maison >interface Web >js tutoriel >Méthode simple JS pour mettre en œuvre les compétences du plug-in_javascript de sélection de liens secondaires de ville

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

WBOY
WBOYoriginal
2016-05-16 15:44:091212parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'effet de grossissement sphérique du texte JS compétences Sharing_JavascriptArticle suivant：Code d'effet de grossissement sphérique du texte JS compétences Sharing_Javascript

Articles Liés

Voir plus