JS 省市两级联动（不带地区版本）
基于网上找的一个版本改造，因为项目需求不需要地区只要省、市，所以做了改版，两个input上直接取出了数据
<html>
<head>
<script src="app/js/jquery-1.11.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var Items=new Array();
function add(id,iArray)
{
Items[id] = iArray;
}
add(0,["1:北京市","2:天津市","3:河北省","4:山西省","5:内蒙古","6:辽宁省","7:吉林省","8:黑龙江省","9:上海市","10:江苏省","11:浙江省","12:安徽省","13:福建省","14:江西省","15:山东省","16:河南省","17:湖北省","18:湖南省","19:广东省","20:广西自治区","21:海南省","22:重庆市","23:四川省","24:贵州省","25:云南省","26:西藏自治区","27:陕西省","28:甘肃省","29:青海省","30:宁夏回族自治区","31:新疆维吾尔自治区","32:香港特别行政区","33:澳门特别行政区","34:台湾省","35:其它"]);
// add(1,["1:北京","2:东城区","3:西城区","4:崇文区","5:宣武区","6:朝阳区","7:丰台区","8:石景山区","9: 海淀区（中关村）","10:门头沟区","11:房山区","12:通州区","13:顺义区","14:昌平区","15:大兴区","16:怀柔区","17:平谷区","18:密云县","19:延庆县","20: 其他"]);
add(1,[]);
// add(2,["1:和平区","2:河东区","3:河西区","4:南开区","5:红桥区","6:塘沽区","7:汉沽区","8:大港区","9:西青区","10:津南区","11:武清区","12:蓟县","13:宁河县","14:静海县","15:其他"]);
add(2,[]);
add(3,["1:石家庄市","2:张家口市","3:承德市","4:秦皇岛市","5:唐山市","6:廊坊市","7:衡水市","8:沧州市","9:邢台市","10:邯郸市","11:保定市","12:其他"]);
add(4,["1:太原市","2:朔州市","3:大同市","4:长治市","5:晋城市","6:忻州市","7:晋中市","8:临汾市","9:吕梁市","10:运城市","11:其他"]);
add(5,["1:呼和浩特市","2:包头市","3:赤峰市","4:呼伦贝尔市","5:鄂尔多斯市","6:乌兰察布市","7:巴彦淖尔市","8:兴安盟","9:阿拉善盟","10:锡林郭勒盟","11:其他"]);
add(6,["1:沈阳市","2:朝阳市","3:阜新市","4:铁岭市","5:抚顺市","6:丹东市","7:本溪市","8:辽阳市","9:鞍山市","10:大连市","11:营口市","12:盘锦市","13:锦州市","14:葫芦岛市","15:其他"]);
add(7,["1:长春市","2:白城市","3:吉林市","4:四平市","5:辽源市","6:通化市","7:白山市","8:延边朝鲜族自治州","9:其他"]);
add(8,["1:哈尔滨市","2:七台河市","3:黑河市","4:大庆市","5:齐齐哈尔市","6:伊春市","7:佳木斯市","8:双鸭山市","9:鸡西市","10:大兴安岭地区(加格达奇)","11:牡丹江","12:鹤岗市","13:绥化市 ","14:其他"]);
// add(9,["1:黄浦区","2:卢湾区","3:徐汇区","4:长宁区","5:静安区","6:普陀区","7:闸北区","8:虹口区","9:杨浦区","10:闵行 区","11:宝山区","12:嘉定区","13:浦东新区","14:金山区","15:松江区","16:青浦区","17:南汇区","18:奉贤区","19:崇明县","20:其他"]);
add(9,[]);
add(10,["1:南京市","2:徐州市","3:连云港市","4:宿迁市","5:淮安市","6:盐城市","7:扬州市","8:泰州市","9:南通市","10:镇江市","11:常州市","12:无锡市","13:苏州市","14:其他"]);
add(11,["1:杭州市","2:湖州市","3:嘉兴市","4:舟山市","5:宁波市","6:绍兴市","7:衢州市","8:金华市","9:台州市","10:温州市","11:丽水市","12:其他"]);
add(12,["1:合肥市","2:宿州市","3:淮北市","4:亳州市","5:阜阳市","6:蚌埠市","7:淮南市","8:滁州市","9:马鞍山市","10:芜湖市","11:铜陵市","12:安庆市","13:黄山市","14:六安市","15:巢湖市","16:池州市","17:宣城市","18:其他"]);
add(13,["1:福州市","2:南平市","3:莆田市","4:三明市","5:泉州市","6:厦门市","7:漳州市","8:龙岩市","9:宁德市","10:其他"]);
add(14,["1:南昌市","2:九江市","3:景德镇市","4:鹰潭市","5:新余市","6:萍乡市","7:赣州市","8:上饶市","9:抚州市","10:宜春市","11:吉安市","12:其他"]);
add(15,["1:济南市","2:聊城市","3:德州市","4:东营市","5:淄博市","6:潍坊市","7:烟台市","8:威海市","9:青岛市","10:日照市","11:临沂市","12:枣庄市","13:济宁市","14:泰安市","15:莱芜市","16:滨州市","17:菏泽市","18:其他"]);
add(16,["1:郑州市","2:三门峡市","3:洛阳市","4:焦作市","5:新乡市","6:鹤壁市","7:安阳市","8:濮阳市","9:开封市","10:商丘市","11:许昌市","12:漯河市","13:平顶山市","14:南阳市","15:信阳市","16:周口市","17:驻马店市","18:其他"]);
add(17,["1:武汉市","2:十堰市","3:襄樊市","4:荆门市","5:孝感市","6:黄冈市","7:鄂州市","8:黄石市","9:咸宁市","10:荆 州市","11:宜昌市","12:随州市","13:恩施土家族苗族自治州","14:仙桃市","15:天门市","16:潜江市","17:神农架林区","18:其他"]);
add(18,["1:长沙市","2:张家界市","3:常德市","4:益阳市","5:岳阳市","6:株洲市","7:湘潭市","8:衡阳市","9:郴州市","10:永州市","11:邵阳市","12:怀化市","13:娄底市","14:湘西土家族苗族自治州","15:其他"]);
add(19,["1:广州市","2:清远市市","3:韶关市","4:河源市","5:梅州市","6:潮州市","7:汕头市","8:揭阳市","9:汕尾市","10: 惠州市","11:东莞市","12:深圳市","13:珠海市","14:中山市","15:江门市","16:佛山市","17:肇庆市","18:云浮市","19:阳江市","20:茂名市","21:湛江市","22: 其他"]);
add(20,["1:南宁市","2:桂林市","3:柳州市","4:梧州市","5:贵港市","6:玉林市","7:钦州市","8:北海市","9:防城港市","10:崇左市","11:百色市","12:河池市","13:来宾市","14:贺州市","15:其他"]);
add(21,["1:海口市","2:三亚市","3:其他"]);
// add(22,["1:渝中区","2:大渡口区","3:江北区","4:沙坪坝区","5:九龙坡区","6:南岸区","7:北碚区","8:万盛区","9:双桥 区","10:渝北区","11:巴南区","12:万州区","13:涪陵区","14:黔江区","15:长寿区","16:合川市","17:永川市","18:江津市","19:南川市","20:綦江县","21:潼南 县","22:铜梁县","23:大足县","24:璧山县","25:垫江县","26:武隆县","27:丰都县","28:城口县","29:开县","30:巫溪县","31:巫山县","32:奉节县","33:云阳 县","34:忠县","35:石柱土家族自治县","36:彭水苗族土家族自治县","37:酉阳土家族苗族自治县","38:秀山土家族苗族自治县","39:其他"]);
add(22,[]);
add(23,["1:成都市","2:广元市","3:绵阳市","4:德阳市","5:南充市","6:广安市","7:遂宁市","8:内江市","9:乐山市","10:自 贡市","11:泸州市","12:宜宾市","13:攀枝花市","14:巴中市","15:资阳市","16:眉山市","17:雅安","18:阿坝藏族羌族自治州","19:甘孜藏族自治州","20:凉山彝 族自治州县","21:其他"]);
add(24,["1:贵阳市","2:六盘水市","3:遵义市","4:安顺市","5:毕节地区","6:铜仁地区","7:黔东南苗族侗族自治州","8:黔南布依族苗族自治州","9:黔西南布依族苗族自治州","10:其他"]);
add(25,["1:昆明市","2:曲靖市","3:玉溪市","4:保山市","5:昭通市","6:丽江市","7:普洱市","8:临沧市","9:宁德市","10:德 宏傣族景颇族自治州","11:怒江傈僳族自治州","12:楚雄彝族自治州","13:红河哈尼族彝族自治州","14:文山壮族苗族自治州","15:大理白族自治州","16:迪庆藏族 自治州","17:西双版纳傣族自治州","18:其他"]);
add(26,["1:拉萨市","2:那曲地区","3:昌都地区","4:林芝地区","5:山南地区","6:日喀则地区","7:阿里地区","8:其他"]);
add(27,["1:西安市","2:延安市","3:铜川市","4:渭南市","5:咸阳市","6:宝鸡市","7:汉中市","8:安康市","9:商洛市","10:其他"]);
add(28,["1:兰州市 ","2:嘉峪关市","3:金昌市","4:白银市","5:天水市","6:武威市","7:酒泉市","8:张掖市","9:庆阳市","10:平凉市","11:定西市","12:陇南市","13:临夏回族自治州","14:甘南藏族自治州","15:其他"]);
add(29,["1:西宁市","2:海东地区","3:海北藏族自治州","4:黄南藏族自治州","5:玉树藏族自治州","6:海南藏族自治州","7:果洛藏族自治州","8:海西蒙古族藏族自治州","9:其他"]);
add(30,["1:银川市","2:石嘴山市","3:吴忠市","4:固原市","5:中卫市","6:其他"]);
add(31,[]);
// add(32,["1:香港岛","2:九龙","3:新界","4:其他"]);
add(32,[]);
// add(33,["1:澳门半岛","2:澳门离岛","3:其他"]);
add(33,[]);
// add(34,["1:基隆","2:新竹","3:台中","4:嘉义","5:台南","6:其他"]);
add(34,[]);
add(35,[]); var selpoc=$("<option value=-1>选择省份</option>");
var selcty=$("<option value=-1>选择城市</option>"); function initProvinceCity(provinceSel,citySel){
debugger
provinceSel.append(createOptions(Items[0])); provinceSel.change(function(e){
var tar = $(e.target);
var pName = tar.find("option:selected").text();
$(this).siblings("[data-city='provName']").val(pName)
debugger
if($(this).val()==-1){
citySel.html(selcty.clone().html());
citySel.append(createOptions(Items[$(this).val()]));
}
else
{
citySel.html(""); if( Items[$(this).val()].length > 0 ){ $(this).siblings('[data-city="cityCode"]').show().next().show();
citySel.append(createOptions(Items[$(this).val()])); var default_cName = $(this).siblings('[data-city="cityCode"]').find("option:selected").text();
$(this).siblings('[data-city="cityName"]').val(default_cName); }else{
$(this).siblings('[data-city="cityCode"]').hide().next().hide();
} }
});
citySel.change(function(e){
var tar = $(e.target);
var cName = tar.find("option:selected").text();
$(this).siblings('[data-city="cityName"]').val(cName);
}) provinceSel.siblings('[data-city="provName"]').val('北京');
provinceSel.siblings('[data-city="cityCode"]').hide().next().hide();
}
function createOptions(cs)
{
var options="";
for(var i=0;i<cs.length;i++)
{
var temp="<option value=";
temp+=cs[i].split(":")[0]+">"+cs[i].split(":")[1]+"</option>";
options+=temp;
}
return $(options);
}
function getProvinceCity(p_c)
{
var pid=parseInt(p_c.split("_")[0]);
var cid=parseInt(p_c.split("_")[1]);
var pv=Items[0][pid].split(":")[1];
var cv=Items[pid][cid].split(":")[1];
return pv+"_"+cv;
}
//初始化
$("document").ready(function(){
initProvinceCity($("#p1"),$("#c1"));
initProvinceCity($("#p2"),$("#c2"));
}); </SCRIPT>
</head>
<body> <div>
<select name="p1" id="p1" style="width:100px;" data-city="provName">
</select>
<label>所在地：省份:</label>
<input type="text" data-city="provName"/>
<select name="c1" id="c1" data-city="cityCode">
</select>
<label>市/区:</label>
<input type="text" data-city="cityName"/>
</div> <div>
<select name="p1" id="p2" style="width:100px;" data-city="provName">
</select>
<label>所在地：省份:</label>
<input type="text" data-city="provName"/>
<select name="c1" id="c2" data-city="cityCode">
</select>
<label>市/区:</label>
<input type="text" data-city="cityName"/>
</div> </body>
</html>
JS 省市两级联动（不带地区版本）的更多相关文章
- JQuery EasyUI combobox 省市两级联动
表名:province 结构如下 CallIn.tpl 模板页 <select id="consult_province" name="consult_provi ...
- JS练习：两级联动
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- ajax实现无刷新两级联动DropDownList
ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...
- Combobox下拉框两级联动
下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 纯js的N级联动列表框 —— 基于jQuery
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 使用json方式实现省市两级下拉级联菜单[原创]
本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...
- ASP_NET实现界面无刷新的DropdownList两级联动效果
所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...
随机推荐
- HDU-2853 Assignment
求二分最大匹配,但还要尽量接近原匹配... 解决方法:对于N个顶点的二分图,每条边同时乘上一个比N稍微大的数N',然后对于在原匹配的边就都+1. 经过这样处理,求得的答案Ans乘除N'即是原图的最大匹 ...
- 刷题总结——分配笔名（51nod1526 trie树）
题目: 班里有n个同学.老师为他们选了n个笔名.现在要把这些笔名分配给每一个同学,每一个同学分配到一个笔名,每一个笔名必须分配给某个同学.现在定义笔名和真名之间的相关度是他们之间的最长公共前缀.设笔名 ...
- bzoj1143/2718 祭祀river（最大独立集）
[CTSC2008]祭祀river Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2175 Solved: 1098[Submit][Status] ...
- 清澄 A1485. Catch The Penguins 抓企鹅
试题来源 2013中国国家集训队论文答辩 问题描述 Xyz带着他的教徒们乘着科考船一路破冰来到了南极大陆,发现这里有许许多多的企鹅.邪恶的Xyz想要抓很多企鹅回去开动物园,当宠物玩.但动物保护协会很快 ...
- OpenJudge 东方14ACM小组 / 20170123 06:Challenge 3
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...
- 【BZOJ2286】消耗战（虚树，DFS序，树形DP）
题意:一棵N个点的树上有若干个关键点,每条边有一个边权,现在要将这些关键点到1的路径全部切断,切断一条边的代价就是边权. 共有M组询问,每组询问有k[i]个关键点,对于每组询问求出完成任务的最小代价. ...
- Windows下载 Curl 命令
Windows下载 Curl 命令 描述: 不仅Linux命令行可以使用curl命令下载软件, Windows系统的cmd命令窗口也可以使用curl命令下载,并且更稳定. 原文作者:Wayne Zhu ...
- PHP基础知识练习
1 . PHP 指的是?(C ) A.Private Home Page B.Personal Hypertext Processor C.PHP: Hypertext Preprocessor D. ...
- 小程序-生成一个小程序码画在canvas画布上生成一张图片分享出去
这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({ ...
- 洛谷——P2878 [USACO07JAN]保护花朵Protecting the Flowers
P2878 [USACO07JAN]保护花朵Protecting the Flowers 题目描述 Farmer John went to cut some wood and left N (2 ≤ ...