Js做的城市三级联动

这个是经常用到的，和大家分享一下 ……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>飞自由技术博客测试----国家、省、市三级联动</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<SCRIPT LANGUAGE="JavaScript">

<!--

function cn(){

this.Items = {};

}

cn.prototype.add = function(id,iArray){

this.Items[id] = iArray;

}

cn.prototype.Exi = function(id){

if(typeof(this.Items[id]) == "undefined"){return false;}

return true;

}

function chg(v){

if(v==3){return;}

var str="0";

for(i=0;i<v;i++){str+=("_"+(document.getElementById(s[i]).selectedIndex))};

var ss=document.getElementById(s[v]);

with(ss){

length = 0; //清理掉option

if(a_t.Exi(str)){

ar=a_t.Items[str];

for(i=0;i<ar.length;i++){

options[length]=new Option(ar[i],ar[i]);

if(ar[i]==o[v]){options[i].selected=true;}//如果列表内包含初始项目则默认选中

}

}

if(++v<s.length){chg(v);}

}

}

var s=["tid1","tid2","tid3"];

var o=["台湾","桃园","八德市"];  //迎欢转载但请注明出处 ，www.zoneself.org  飞自由，点点滴滴，从基础做起

function setup(){

for(i=1;i<=3;i++){

document.getElementById(s[(i-1)]).onchange=new Function("chg("+(i)+")");

}

chg(0);

}

var a_t = new cn();

a_t.add("0",["中国","韩国","台湾"]);

a_t.add("0_0", ["安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉 林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西"]);

a_t.add("0_0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]);

a_t.add("0_0_1",["北京"]);

a_t.add("0_0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]);

a_t.add("0_0_3",["白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖"]);

a_t.add("0_0_4",["潮州","东莞","佛山","广州","河源","深圳","阳江","云浮","湛江","肇庆","中山","珠海"]);

a_t.add("0_0_5",["百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林"]);

a_t.add("0_0_6",["安顺","毕节","贵阳","六盘水","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","铜仁","遵义"]);

a_t.add("0_0_7",["澄迈县","定安县","东方","海口",,"琼中黎族苗族自治县","三亚","屯昌县","万宁","文昌","五指山","儋州"]);

a_t.add("0_0_8",["保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口"]);

a_t.add("0_0_9",["安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","郑州","周口","驻马店","漯河","濮阳"]);

a_t.add("0_0_10",["大庆","大兴安岭","哈尔滨","鹤岗","黑河","鸡西","佳木斯","牡丹江","七台河","齐齐哈尔","双鸭山","绥化","伊春"]);

a_t.add("0_0_11",["鄂州","恩施土家族苗族自治州","黄冈","黄石","荆门","荆州","潜江","神农架林区","十堰","随州","天门","武汉","仙桃","咸宁","襄樊","孝感","宜昌"]);

a_t.add("0_0_12",["常德","长沙","郴州","衡阳","怀化","娄底","邵阳","湘潭","湘西土家族苗族自治州","益阳","永州","岳阳","张家界","株洲"]);

a_t.add("0_0_13",["白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州"]);

a_t.add("0_0_14",["常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江"]);

a_t.add("0_0_15",["抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭"]);

a_t.add("0_0_16",["鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","沈阳","铁岭","营口"]);

a_t.add("0_0_17",["阿拉善盟","巴彦淖尔盟","包头","赤峰","鄂尔多斯","呼和浩特","呼伦贝尔","通辽","乌海","乌兰察布盟","锡林郭勒盟","兴安盟"]);

a_t.add("0_0_18",["固原","石嘴山","吴忠","银川"]);

a_t.add("0_0_19",["果洛藏族自治州","海北藏族自治州","海东","海南藏族自治州","海西蒙古族藏族自治州","黄南藏族自治州","西宁","玉树藏族自治州"]);

a_t.add("0_0_20",["滨州","德州","东营","菏泽","济南","济宁","莱芜","聊城","临沂","青岛","日照","泰安","威海","潍坊","烟台","枣庄","淄博"]);

a_t.add("0_1",["汉城特別市","釜山广域市","大邱广域市","济州道"]);

a_t.add("0_1_0",["汉城"]);

a_t.add("0_1_1",["釜山","机张郡"]);

a_t.add("0_1_2",["大邱","达城郡"]);

a_t.add("0_1_3",["仁川","江华郡","瓮津郡"]);

a_t.add("0_1_4",["光州"]);

a_t.add("0_1_5",["大田"]);

a_t.add("0_1_6",["蔚山","蔚州郡"]);

a_t.add("0_1_7",["水原市","城南市","安山市","高阳市","安养市","富川市"]);

a_t.add("0_1_8",["春川市","原州市","江陵市"]);

a_t.add("0_1_9",["清州市"]);

a_t.add("0_1_10",["天安市"]);

a_t.add("0_1_11",["全州市","群山市","益山市"]);

a_t.add("0_1_12",["木浦市","丽水市","顺天市"]);

a_t.add("0_1_13",["浦项市","龟尾市","庆州市"]);

a_t.add("0_1_14",["昌原市","马山市","晋州市"]);

a_t.add("0_1_15",["济州市","西归浦市","北济州郡","南济州郡"]);

a_t.add("0_2",["基隆","台北","桃园","新竹","苗栗","台中","彰化","南投","云林","嘉义","台南","高雄","台东","花莲"]);

a_t.add("0_2_0",["基隆"]);

a_t.add("0_2_1",["台北"]);

a_t.add("0_2_2",["中壢市","平鎮市","龍潭鄉","楊梅鎮","新屋鄉","觀音鄉","龜山鄉","八德市","大溪鎮","復興鄉","大園鄉","蘆竹鄉"]);

a_t.add("0_2_3",["名古屋市 "]);

a_t.add("0_2_4",["札幌市"]);

a_t.add("0_2_5",["神戸市"]);

a_t.add("0_2_6",["京都市"]);

a_t.add("0_2_7",["福冈市"]);

a_t.add("0_2_8",["川崎市"]);

a_t.add("0_2_9",["埼玉市"]);

a_t.add("0_2_10",["广岛市"]);

a_t.add("0_2_11",["仙台市"]);

a_t.add("0_2_12",["北九州市 "]);

a_t.add("0_2_13",["千叶市"]);

//-->

</SCRIPT>

</head>

<body onLoad="setup()">

<form method=‘post‘ action=‘@.php‘>

<select id="tid1" name="tid1"></select>

<select id="tid2" name="tid2"></select>

<select id="tid3" name="tid3"></select>

<input type=‘submit‘ value=‘submit‘>

</form>

</body>

时间： 2024-11-05 21:59:32

Js做的城市三级联动的相关文章

城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

城市三级联动Springmvc+mysql

昨天我做了一个功能,就是一个简单的城市三级联动,现在贴上分享 是采用springmvc+mysql去做的,最后台的东西我就不写了,就是写控制层+HTML+Jquery的部分,以下是控制层 1 //获取省市区 2 @RequestMapping(value="province.do") 3 @ResponseBody 4 public Map<String, Object> province(HttpServletRequest request,HttpServletResp

jquery 城市三级联动

js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(provinceN,cityN,districtN){ var all_province=""; for(var i=0;i<allCity.province.length;i++){ all_province+='<option name="province"

转: javascript实现全国城市三级联动菜单代码

<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="JavaScript"> function Dsy() { this.Items = {}; } Dsy

js中的省市区三级联动

想要实现省市区的三级联动,首先需要的是一个下拉框,这个下拉框用我们的<select>标签就能实现,具体如下: <select id="province" onchange="chooseProvince(this)"> <option value="1">请选择省</option> </select><select id="city" onchange=&quo

JS全国城市三级联动

HTML <select id="s_province" name="s_province"></select> <select id="s_city" name="s_city" ></select> <select id="s_county" name="s_county"></select> <scrip

js城市三级联动 ajax版

写得乱七八糟:自己记录一下,不可使用! (function (w, $) { //定义SelectSimulation的构造函数 var SelectSimulation = function (ele, opt) { this.$element = ele, this.defaults = { 'len': 3, 'def': [], 'ajax': [], 'dataname': 'data', 'bind': [],//{ text: 'text', val: 'id' }; 'isnul

Android城市三级联动选择器

便捷.新颖的三级fdsafdsa联动城市选择器 /**  * 城市Picker  *  * @author zihao  *  */ public class CityPicker extends LinearLayout {     /** 滑动控件 */fdsaf     private ScrollerNumberPicker provincePicker;     private ScrollerNumberPicker cityPicker;     private ScrollerN

ajax结合php简单的城市三级联动

//ajax代码 $('#pro').change(function () { var id = $(this).val(); if (id == 0) { $('#city').html('<option value="0">请选择城市</option>'); return false; } $.get('/bre/ajaxCity', {id: id}, function (data) { var html = ''; var area = ''; $.ea