Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:31:52
original
1334 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
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!