communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > javascript实现省市区三级联动下拉框菜单_javascript技巧

javascript实现省市区三级联动下拉框菜单_javascript技巧

WBOY
Libérer： 2016-05-16 15:31:52
original
1382 Les gens l'ont consulté

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

 

首先写一个静态的页面：

<!DOCTYPE html>
<html>
<head>
<title>QQ JS省市区三级联动</title>
<!-- 使用QQ的省市区数据 -->
<!--
<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>
-->
<script type="text/javascript" src="geo.js"></script>
</head>
<body onload="setup();preselect('北京市');promptinfo();">
    <form name="shareip" action="" method="post">
      <select class="select" name="province" id="s1">
       <option></option>
      </select>
      <select class="select" name="city" id="s2">
       <option></option>
      </select>
      <select class="select" name="town" id="s3">
       <option></option>
      </select>
      <input id="address" name="address" type="hidden" value="" />
     <input onclick="alert(promptinfo())" type="submit" value="提交" />
    </form>
<script>
function promptinfo()
{
  var address = document.getElementById('address').value;
  var s1 = document.getElementById('s1').value;
  var s2 = document.getElementById('s2').value;
  var s3 = document.getElementById('s3').value;
  address=""+s1+ s2 + s3;
  return address;
}

</script>
</body>
</html>
Copier après la connexion

调用的geo.js源码：

function Dsy() {
  this.Items = {};
}
Dsy.prototype.add = function (id, iArray) {
  this.Items[id] = iArray;
}
Dsy.prototype.Exists = function (id) {
  if (typeof(this.Items[id]) == "undefined") return false;
  return true;
}

function change(v) {
  var str = "0";
  for (i = 0; i  0 || !v) {
      if (dsy.Exists(str)) {
        ar = dsy.Items[str];
        for (i = 0; i
Copier après la connexion
Étiquettes associées：
省市区三级联动 js省市区三级联动 省市区三级联动数据库
source：php.cn
Article précédent：Apprenez les compétences non définies et null_javascript de javascript avec moi Article suivant：javascript中return，return true,return false三者的用法及区别_javascript技巧
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2226
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2372
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1980
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1868
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1938
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal