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

本文实例讲述了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 < v; i++) { str += ("_" + (document.getElementById(s[i]).selectedIndex - 1));}
  ;
  var ss = document.getElementById(s[v]);
  with (ss) {
    length = 0;
    options[0] = new Option(opt0[v], opt0[v]);
    if (v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) {
      if (dsy.Exists(str)) {
        ar = dsy.Items[str];
        for (i = 0; i < ar.length; i++)options[length] = new Option(ar[i], ar[i]);
        if (v)options[0].selected = true;
      }
    }
    if (++v < s.length) {change(v);}
  }
}
function preselect(p_key) {
  //alert(p_key);
  var index;

  var provinces = new Array("北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南省", "四川省", "贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆", "香港", "澳门", "台湾省");
  var cnt = provinces.length;
  //alert(cnt);
  for (i = 0; i < cnt; i++) {
    if (p_key == provinces[i]) {
      index = i;
      break;
    }
  }
  if (index < provinces.length) {
    document.getElementById(s[0]).selectedIndex = index + 1;
    change(1);
  }
}

var dsy = new Dsy();

dsy.add("0_0_0", ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]);
dsy.add("0_0", ["北京市"]);
dsy.add("0_1_0", ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"]);
dsy.add("0_1", ["天津市"]);
dsy.add("0_2_0", ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县", "城桥镇"]);
dsy.add("0_2", ["上海市"]);
dsy.add("0_3_0", ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]);
dsy.add("0_3", ["重庆市"]);
dsy.add("0_4_0", ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]);
dsy.add("0_4_1", ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]);
dsy.add("0_4_2", ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]);
dsy.add("0_4_3", ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]);
dsy.add("0_4_4", ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦县", "滦州镇", "滦南县", "

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

JS实现选项卡实例详解 - 2015-11-19 14:11:40

本文实例讲述了JS实现选项卡的方法。分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。 1、首先获取元素。 2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。 3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。 4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

jquery表单验证需要做些什么 - 2015-11-19 14:11:38

一、当元素失去焦点时发生blur 事件。 实例:jQuery blur() 方法 添加函数到 blur 事件。当 input 字段失去焦点时发生 blur 事件: $("input").blur(function(){alert("This input field has lost its focus.");}); 定义和用法 当元素失去焦点时发生 blur 事件。 blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。 提示: 该方法常与 focus() 方法一起使用。 语法
先给大家说下问题背景:最近在做一个项目,开发微信的某个功能,使用的是asp.net开发,jquery1.8.0版本。 在微信中点击按钮触发事件,调用ajax与服务器端进行交互,回调函数走的是error。 分析原因: 首先我想到的是返回的数据类型有问题,因为在jquery 版本在1.4以上对json的格式非常严格,需要符合{"target":true,"message":"成功"}这样的格式。用JSON.stringify()函数分析了response对象,结果符合,排除了原因。 既然ajax 走的是err
本文详细讲述了12种JavaScript常用的MVC框架。分享给大家供大家参考,具体如下: Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在 博客 中总结了每种框架的优缺点,最终的结果是,Ember.js胜出。 此次比较针对的特性标准有四种,分别是: ① UI绑定(UI Bindings) ② 复合视图(Composed Views) ③ Web表现层(Web Presentation Layer) ④ 与其他

实例代码详解jquery.slides.js - 2015-11-18 14:11:15

Slides
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HT
1、函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明: function 函数名称 (参数:可选){ 函数体 } 函数表达式: function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明
1、什么是arguments arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的。所有主要的js函数库都利用了arguments对象。所以agruments对象对于javascript程序员来说是必需熟悉的。在javascript函数体内,标识符arguments具有特殊含义。它是调用对象的一个特殊属性,用来引用Arguments对象。Arugments对象就像数组,注意这里只是像并不是哈。 javascript函数体内,arguments像数组

跟我学习javascript的闭包 - 2015-11-18 14:11:12

JavaScript 闭包究竟是什么? 用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑。陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是不是非常明白,最近偶然看了一下 jQuery基础教程 的附录,发现附录A对JavaScript的闭包的介绍简单易懂,于是借花献佛总结一下。 1、定义 闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。 直接上例子 function a(){ var i=
信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新。虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣。一个小的细节是能否支持浏览器“后退”和“前进“键。本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页。 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点“下一页”时,让网页重定向到page+1的新地址。例如新浪的新闻网就 是这么做的,通过改变网址实现:index_