前端感觉写的比较少，也是为了练手，下午没事用来写了这个三级联动，也是第一次写这东西。

据我了解，城市信息可以选择存在数据库或者直接写在前端，为了省事，我直接写在前端，下面是我的代码：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
//省份城市数组
var fujian_city = new Array(‘福州’,’漳州’,’厦门’,’龙岩’,’泉州’,’南平’,’莆田’,’宁德’,’三明’);
var guangdong_city = new Array(‘广州’,’深圳’,’东莞’,’潮州’,’河源’,’汕头’,’珠海’,’佛山’,’肇庆’,’韶关’);

//城市下属区县数组
var fuzhou_county = new Array(‘鼓楼区’,’台江区’,’平潭’,’晋安区’,’马尾区’,’福清市’,’长乐市’,’闽侯县’,’连江县’,’闽清县’);
var zhangzhou_county = new Array(‘芗城区’,’龙文区’,’南靖县’,’平和县’,’龙海市’,’东山县’,’华安县’);
var xiamen_county = new Array(‘湖里区’,’思明区’,’海沧区’,’集美区’,’同安县’,’翔安区’);
//获取省份改变的事件，并设置被选择省份城市信息
$(“#province”).change(function(){
//清空每次选择留下的城市信息
$(“#city”).find(“option”).remove();
//设置未选择的城市默认状态
$(“#city”).append(‘<option value=”未选择”>未选择</option>’);
//获取被选中省份的值
var province=$(“#province”).val();
//设置城市的自定义函数
$.extend({set_cities:function(province){
var arr_length = province.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+province[i-1]+’>’+province[i-1]+'</option>’;
$(“#city”).append(place_info);
}
}});
switch(province){
case ‘福建’:
$.set_cities(fujian_city);
break;
case ‘广东’:
$.set_cities( guangdong_city);
break;
default :
alert(‘没有写信息的省份，这里只展示福建和广东两个省份’);
}
})
//获取改变城市的事件，并设置区县信息，这里只写了福建的福州、漳州、厦门的部分城市信息
$(“#city”).change(function(){
//清空每次选择留下的区县信息
$(“#county”).find(“option”).remove();
//设置未选择的区县默认状态
$(“#county”).append(‘<option value=”未选择”>未选择</option>’);
//获取被选中城市的值
var city=$(“#city “).val();
//设置区县的自定义函数
$.extend({set_counties:function(city){
var arr_length = city.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+city[i-1]+’>’+city[i-1]+'</option>’;
$(“#county”).append(place_info);
}
}});
switch(city){
case ‘福州’:
$.set_counties(fuzhou_county);
break;
case ‘厦门’:
$.set_counties( xiamen_county);
break;
case ‘漳州’:
$.set_counties( zhangzhou_county);
break;
default :
alert(‘这里只写了福建的福州、漳州、厦门的部分城市信息’);
}
})
});
</script>
</head>
<body>
<div>
<ul>
<li>

<select name=”province” id=”province”>
<option value=”福建”>福建</option>
<option value=”广东”>广东</option>
<option value=”浙江”>浙江</option>
<option value=”江西”>江西</option>
</select>
</li>
<li>

<select name=”city” id=”city”>
<option value=”0″>未选择</option>
</select>
</li>
<li>
<select name=”county” id=”county”>
<option value=”0″>未选择</option>
</select>
</li>
</ul>
</div>
</body>
</html>

效果如下：

主要是做了这个功能，相关代码都有些备注，浅显易懂。如果你要使用可以直接继续添加省份、城市的数据，或者改改采用ajax获取数据，有不懂的代码可以留言或者联系我。

本人博客：基于Jquery实现省份、城市、区县三级联动

基于Jquery实现省份、城市、区县三级联动的更多相关文章

  1. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  2. ajax+struts2 实现省份-城市-地区三级联动

    1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...

  3. easyui commobox省市区县三级联动

    1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...

  4. 省市区县三级联动JAVA+MySQL+JQuery

    场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...

  5. 基于thinkphp和ajax的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  6. 省份、城市、区县三级联动Html代码

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  7. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  8. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  9. js 省份城市二级动态联动的例子

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

  2. 关于RxJava背压

    http://flyou.ren/2017/04/05/%E5%85%B3%E4%BA%8ERxJava%E8%83%8C%E5%8E%8B/?utm_source=tuicool&utm_m ...

  3. 如何确定Hadoop中map和reduce的个数--map和reduce数量之间的关系是什么？

    一般情况下,在输入源是文件的时候,一个task的map数量由splitSize来决定的,那么splitSize是由以下几个来决定的 goalSize = totalSize / mapred.map. ...

  4. HDU5124：lines（线段树+离散化）或（离散化思想）

    http://acm.hdu.edu.cn/showproblem.php?pid=5124 Problem Description John has several lines. The lines ...

  5. 有关Oracle统计信息的知识点

    一.什么是统计信息 统计信息主要是描述数据库中表,索引的大小,规模,数据分布状况等的一类信息.例如,表的行数,块数,平均每行的大小,索引的leaf blocks,索引字段的行数,不同值的大小等,都属于 ...

  6. 使用nagios+python监控nginx进程数

    1.编写python脚本监控nginx #!/usr/bin/python # -*- coding: utf-8 -*- import os, sys, time import string imp ...

  7. 2017-2018-2 20165207 实验三《敏捷开发与XP实践》实验报告

    java 实验三 实验报告 实验内容 代码规范 不规范的代码可能妨碍阅读,在粘贴下来老师在云班课中设置的提交点一的代码之后,我首先使用了IDEA中Code选项卡的Reformat Code功能规范代码 ...

  8. Linux内核参数之arp_ignore和arp_announce

    一.arp_ignore和arp_announce介绍 arp_ignore和arp_announce参数都和ARP协议相关,主要用于控制系统返回arp响应和发送arp请求时的动作.这两个参数很重要, ...

  9. Python3.x：函数定义

    Python3.x:函数定义 1,函数定义: def 函数名称([参数1,参数2,参数3......]): 执行语句 2,实例一(不带参数和没返回值): def helloWorld(): print ...

  10. openwrt编译系统生成ubi镜像的各变量解析

    1.MKUBIFS_OPTS的作用 传递参数给mkfs.ubifs 2.MKUBIFS_OPTS传递了哪些参数? 传递了最小输入输出单元大小.逻辑擦除块大小.最大物理擦除块的个数,分别由选项-m.-e ...