Home >Web Front-end >JS Tutorial >javascript实现省市区三级联动下拉框菜单_javascript技巧

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

WBOYOriginal: 2016-05-16 15:31:521377browse

本文实例讲述了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>

调用的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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learn javascript's undefined and null_javascript skills from meNext article：Learn javascript's undefined and null_javascript skills from me

See more

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

Related articles