`
tao415652813
  • 浏览: 14726 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

省市级联菜单

    博客分类:
  • js
阅读更多

js文件。

function initcity(province, city) {

switch (document.getElementById(province).value) {

case "安徽":

var cityOptions = new Array("合肥", "合肥", "安庆", "安庆",

"蚌埠", "蚌埠", "亳州", "亳州", "巢湖", "巢湖", "滁州", "滁州", "阜阳", "阜阳",

"贵池", "贵池", "淮北", "淮北", "淮化", "淮化", "淮南", "淮南", "黄山", "黄山",

"九华山", "九华山", "六安", "六安", "马鞍山", "马鞍山", "宿州", "宿州", "铜陵", "铜陵",

"屯溪", "屯溪", "芜湖", "芜湖", "宣城", "宣城");

break;

case "北京":

var cityOptions = new Array("东城", "东城", "西城", "西城", "崇文",

"崇文", "宣武", "宣武", "朝阳", "朝阳", "丰台", "丰台", "石景山", "石景山", "海淀",

"海淀", "门头沟", "门头沟", "房山", "房山", "通州", "通州", "顺义", "顺义", "昌平",

"昌平", "大兴", "大兴", "平谷", "平谷", "怀柔", "怀柔", "密云", "密云", "延庆",

"延庆");

break;

case "重庆":

var cityOptions = new Array("万州", "万州", "涪陵", "涪陵", "渝中",

"渝中", "大渡口", "大渡口", "江北", "江北", "沙坪坝", "沙坪坝", "九龙坡", "九龙坡",

"南岸", "南岸", "北碚", "北碚", "万盛", "万盛", "双挢", "双挢", "渝北", "渝北",

"巴南", "巴南", "黔江", "黔江", "长寿", "长寿", "綦江", "綦江", "潼南", "潼南",

"铜梁", "铜梁", "大足", "大足", "荣昌", "荣昌", "壁山", "壁山", "梁平", "梁平",

"城口", "城口", "丰都", "丰都", "垫江", "垫江", "武隆", "武隆", "忠县", "忠县",

"开县", "开县", "云阳", "云阳", "奉节", "奉节", "巫山", "巫山", "巫溪", "巫溪",

"石柱", "石柱", "秀山", "秀山", "酉阳", "酉阳", "彭水", "彭水", "江津", "江津",

"合川", "合川", "永川", "永川", "南川", "南川");

break;

case "福建":

var cityOptions = new Array("福州", "福州", "福安", "福安",

"龙岩", "龙岩", "南平", "南平", "宁德", "宁德", "莆田", "莆田", "泉州", "泉州",

"三明", "三明", "邵武", "邵武", "石狮", "石狮", "永安", "永安", "武夷山", "武夷山",

"厦门", "厦门", "漳州", "漳州");

break;

case "甘肃":

var cityOptions = new Array("兰州", "兰州", "白银", "白银",

"定西", "定西", "敦煌", "敦煌", "甘南", "甘南", "金昌", "金昌", "酒泉", "酒泉",

"临夏", "临夏", "平凉", "平凉", "天水", "天水", "武都", "武都", "武威", "武威",

"西峰", "西峰", "张掖", "张掖");

break;

case "广东":

var cityOptions = new Array("广州", "广州", "潮阳", "潮阳",

"潮州", "潮州", "澄海", "澄海", "东莞", "东莞", "佛山", "佛山", "河源", "河源",

"惠州", "惠州", "江门", "江门", "揭阳", "揭阳", "开平", "开平", "茂名", "茂名",

"梅州", "梅州", "清远", "清远", "汕头", "汕头", "汕尾", "汕尾", "韶关", "韶关",

"深圳", "深圳", "顺德", "顺德", "阳江", "阳江", "英德", "英德", "云浮", "云浮",

"增城", "增城", "湛江", "湛江", "肇庆", "肇庆", "中山", "中山", "珠海", "珠海");

break;

case "广西":

var cityOptions = new Array("南宁", "南宁", "百色", "百色",

"北海", "北海", "桂林", "桂林", "防城港", "防城港", "河池", "河池", "贺州", "贺州",

"柳州", "柳州", "钦州", "钦州", "梧州", "梧州", "玉林", "玉林");

break;

case "贵州":

var cityOptions = new Array("贵阳", "贵阳", "安顺", "安顺",

"毕节", "毕节", "都匀", "都匀", "凯里", "凯里", "六盘水", "六盘水", "铜仁", "铜仁",

"兴义", "兴义", "玉屏", "玉屏", "遵义", "遵义");

break;

case "海南":

var cityOptions = new Array("海口", "海口", "儋县", "儋县",

"陵水", "陵水", "琼海", "琼海", "三亚", "三亚", "通什", "通什", "万宁", "万宁");

break;

case "河北":

var cityOptions = new Array("石家庄", "石家庄", "保定", "保定",

"北戴河", "北戴河", "沧州", "沧州", "承德", "承德", "丰润", "丰润", "邯郸", "邯郸",

"衡水", "衡水", "廊坊", "廊坊", "南戴河", "南戴河", "秦皇岛", "秦皇岛", "唐山", "唐山",

"新城", "新城", "邢台", "邢台", "张家口", "张家口");

break;

case "黑龙江":

var cityOptions = new Array("哈尔滨", "哈尔滨", "北安", "北安",

"大庆", "大庆", "大兴安岭", "大兴安岭", "鹤岗", "鹤岗", "黑河", "黑河", "佳木斯",

"佳木斯", "鸡西", "鸡西", "牡丹江", "牡丹江", "齐齐哈尔", "齐齐哈尔", "七台河", "七台河",

"双鸭山", "双鸭山", "绥化", "绥化", "伊春", "伊春");

break;

case "河南":

var cityOptions = new Array("郑州", "郑州", "安阳", "安阳",

"鹤壁", "鹤壁", "潢川", "潢川", "焦作", "焦作", "济源", "济源", "开封", "开封",

"漯河", "漯河", "洛阳", "洛阳", "南阳", "南阳", "平顶山", "平顶山", "濮阳", "濮阳",

"三门峡", "三门峡", "商丘", "商丘", "新乡", "新乡", "信阳", "信阳", "许昌", "许昌",

"周口", "周口", "驻马店", "驻马店");

break;

case "香港":

var cityOptions = new Array("香港", "香港", "九龙", "九龙", "新界",

"新界");

break;

case "湖北":

var cityOptions = new Array("武汉", "武汉", "恩施", "恩施",

"鄂州", "鄂州", "黄冈", "黄冈", "黄石", "黄石", "荆门", "荆门", "荆州", "荆州",

"潜江", "潜江", "十堰", "十堰", "随州", "随州", "武穴", "武穴", "仙桃", "仙桃",

"咸宁", "咸宁", "襄阳", "襄阳", "襄樊", "襄樊", "孝感", "孝感", "宜昌", "宜昌");

break;

case "湖南":

var cityOptions = new Array("长沙", "长沙", "常德", "常德",

"郴州", "郴州", "衡阳", "衡阳", "怀化", "怀化", "吉首", "吉首", "娄底", "娄底",

"邵阳", "邵阳", "湘潭", "湘潭", "益阳", "益阳", "岳阳", "岳阳", "永州", "永州",

"张家界", "张家界", "株洲", "株洲");

break;

case "江苏":

var cityOptions = new Array("南京", "南京", "常熟", "常熟",

"常州", "常州", "海门", "海门", "淮安", "淮安", "江都", "江都", "江阴", "江阴",

"昆山", "昆山", "连云港", "连云港", "南通", "南通", "启东", "启东", "沭阳", "沭阳",

"宿迁", "宿迁", "苏州", "苏州", "太仓", "太仓", "泰州", "泰州", "同里", "同里",

"无锡", "无锡", "徐州", "徐州", "盐城", "盐城", "扬州", "扬州", "宜兴", "宜兴",

"仪征", "仪征", "张家港", "张家港", "镇江", "镇江", "周庄", "周庄");

break;

case "江西":

var cityOptions = new Array("南昌", "南昌", "抚州", "抚州",

"赣州", "赣州", "吉安", "吉安", "景德镇", "景德镇", "井冈山", "井冈山", "九江", "九江",

"庐山", "庐山", "萍乡", "萍乡", "上饶", "上饶", "新余", "新余", "宜春", "宜春",

"鹰潭", "鹰潭");

break;

case "吉林":

var cityOptions = new Array("长春", "长春", "白城", "白城",

"白山", "白山", "珲春", "珲春", "辽源", "辽源", "梅河", "梅河", "吉林", "吉林",

"四平", "四平", "松原", "松原", "通化", "通化", "延吉", "延吉");

break;

case "辽宁":

var cityOptions = new Array("沈阳", "沈阳", "鞍山", "鞍山",

"本溪", "本溪", "朝阳", "朝阳", "大连", "大连", "丹东", "丹东", "抚顺", "抚顺",

"阜新", "阜新", "葫芦岛", "葫芦岛", "锦州", "锦州", "辽阳", "辽阳", "盘锦", "盘锦",

"铁岭", "铁岭", "营口", "营口");

break;

case "澳门":

var cityOptions = new Array("澳门", "澳门");

break;

case "内蒙古":

var cityOptions = new Array("呼和浩特", "呼和浩特", "阿拉善盟",

"阿拉善盟", "包头", "包头", "赤峰", "赤峰", "东胜", "东胜", "海拉尔", "海拉尔", "集宁",

"集宁", "临河", "临河", "通辽", "通辽", "乌海", "乌海", "乌兰浩特", "乌兰浩特",

"锡林浩特", "锡林浩特");

break;

case "宁夏":

var cityOptions = new Array("银川", "银川", "固源", "固源",

"石嘴山", "石嘴山", "吴忠", "吴忠");

break;

case "青海":

var cityOptions = new Array("西宁", "西宁", "德令哈", "德令哈",

"格尔木", "格尔木", "共和", "共和", "海东", "海东", "海晏", "海晏", "玛沁", "玛沁",

"同仁", "同仁", "玉树", "玉树");

break;

case "山东":

var cityOptions = new Array("济南", "济南", "滨州", "滨州",

"兖州", "兖州", "德州", "德州", "东营", "东营", "菏泽", "菏泽", "济宁", "济宁",

"莱芜", "莱芜", "聊城", "聊城", "临沂", "临沂", "蓬莱", "蓬莱", "青岛", "青岛",

"曲阜", "曲阜", "日照", "日照", "泰安", "泰安", "潍坊", "潍坊", "威海", "威海",

"烟台", "烟台", "枣庄", "枣庄", "淄博", "淄博");

break;

case "上海":

var cityOptions = new Array("崇明", "崇明", "黄浦", "黄浦", "卢湾",

"卢湾", "徐汇", "徐汇", "长宁", "长宁", "静安", "静安", "普陀", "普陀", "闸北",

"闸北", "虹口", "虹口", "杨浦", "杨浦", "闵行", "闵行", "宝山", "宝山", "嘉定",

"嘉定", "浦东", "浦东", "金山", "金山", "松江", "松江", "青浦", "青浦", "南汇",

"南汇", "奉贤", "奉贤");

break;

case "山西":

var cityOptions = new Array("太原", "太原", "长治", "长治",

"大同", "大同", "候马", "候马", "晋城", "晋城", "离石", "离石", "临汾", "临汾",

"宁武", "宁武", "朔州", "朔州", "忻州", "忻州", "阳泉", "阳泉", "榆次", "榆次",

"运城", "运城");

break;

case "陕西":

var cityOptions = new Array("西安", "西安", "安康", "安康",

"宝鸡", "宝鸡", "汉中", "汉中", "渭南", "渭南", "商州", "商州", "绥德", "绥德",

"铜川", "铜川", "咸阳", "咸阳", "延安", "延安", "榆林", "榆林");

break;

case "四川":

var cityOptions = new Array("成都", "成都", "巴中", "巴中",

"达川", "达川", "德阳", "德阳", "都江堰", "都江堰", "峨眉山", "峨眉山", "涪陵", "涪陵",

"广安", "广安", "广元", "广元", "九寨沟", "九寨沟", "康定", "康定", "乐山", "乐山",

"泸州", "泸州", "马尔康", "马尔康", "绵阳", "绵阳", "眉山", "眉山", "南充", "南充",

"内江", "内江", "攀枝花", "攀枝花", "遂宁", "遂宁", "汶川", "汶川", "西昌", "西昌",

"雅安", "雅安", "宜宾", "宜宾", "自贡", "自贡", "资阳", "资阳");

break;

case "台湾":

var cityOptions = new Array("台北", "台北", "基隆", "基隆",

"台南", "台南", "台中", "台中", "高雄", "高雄", "屏东", "屏东", "南投", "南投",

"云林", "云林", "新竹", "新竹", "彰化", "彰化", "苗栗", "苗栗", "嘉义", "嘉义",

"花莲", "花莲", "桃园", "桃园", "宜兰", "宜兰", "台东", "台东", "金门", "金门",

"马祖", "马祖", "澎湖", "澎湖");

break;

case "天津":

var cityOptions = new Array("天津", "天津", "和平", "和平", "东丽",

"东丽", "河东", "河东", "西青", "西青", "河西", "河西", "津南", "津南", "南开",

"南开", "北辰", "北辰", "河北", "河北", "武清", "武清", "红挢", "红挢", "塘沽",

"塘沽", "汉沽", "汉沽", "大港", "大港", "宁河", "宁河", "静海", "静海", "宝坻",

"宝坻", "蓟县", "蓟县");

break;

case "新疆":

var cityOptions = new Array("乌鲁木齐", "乌鲁木齐", "阿克苏",

"阿克苏", "阿勒泰", "阿勒泰", "阿图什", "阿图什", "博乐", "博乐", "昌吉", "昌吉",

"东山", "东山", "哈密", "哈密", "和田", "和田", "喀什", "喀什", "克拉玛依", "克拉玛依",

"库车", "库车", "库尔勒", "库尔勒", "奎屯", "奎屯", "石河子", "石河子", "塔城", "塔城",

"吐鲁番", "吐鲁番", "伊宁", "伊宁");

break;

case "西藏":

var cityOptions = new Array("拉萨", "拉萨", "阿里", "阿里",

"昌都", "昌都", "林芝", "林芝", "那曲", "那曲", "日喀则", "日喀则", "山南", "山南");

break;

case "云南":

var cityOptions = new Array("昆明", "昆明", "大理", "大理",

"保山", "保山", "楚雄", "楚雄", "大理", "大理", "东川", "东川", "个旧", "个旧",

"景洪", "景洪", "开远", "开远", "临沧", "临沧", "丽江", "丽江", "六库", "六库",

"潞西", "潞西", "曲靖", "曲靖", "思茅", "思茅", "文山", "文山", "西双版纳", "西双版纳",

"玉溪", "玉溪", "中甸", "中甸", "昭通", "昭通");

break;

case "浙江":

var cityOptions = new Array("杭州", "杭州", "安吉", "安吉",

"慈溪", "慈溪", "定海", "定海", "奉化", "奉化", "海盐", "海盐", "黄岩", "黄岩",

"湖州", "湖州", "嘉兴", "嘉兴", "金华", "金华", "临安", "临安", "临海", "临海",

"丽水", "丽水", "宁波", "宁波", "瓯海", "瓯海", "平湖", "平湖", "千岛湖", "千岛湖",

"衢州", "衢州", "江山", "江山", "瑞安", "瑞安", "绍兴", "绍兴", "嵊州", "嵊州",

"台州", "台州", "温岭", "温岭", "温州", "温州", "余姚", "余姚", "舟山", "舟山");

break;

case "海外":

var cityOptions = new Array("欧洲", "欧洲", "北美", "北美", "南美",

"南美", "亚洲", "亚洲", "非洲", "非洲", "大洋洲", "大洋洲");

break;

default:

//var cityOptions = new Array("请选择地区", "");

break;

}

var citySL = document.getElementById(city);

citySL.options.length = 0;

citySL.options[0]=new Option("请选择地市","all");

for ( var i = 0; i < cityOptions.length / 2; i++) {

citySL.options[i+1] = new Option(cityOptions[i * 2],

cityOptions[i * 2 + 1]);

if (citySL.options[i+1].value == city) {

citySL.selectedIndex = i+1;

}

}

}

 

function creatprovince(province) {

var provinces = new Array("北京", "上海", "重庆", "安徽", "福建", "甘肃", "广东", "广西",

"贵州", "海南", "河北", "黑龙江", "河南", "香港", "湖北", "湖南", "江苏", "江西", "吉林",

"辽宁", "澳门", "内蒙古", "宁夏", "青海", "山东", "山西", "陕西", "四川", "台湾", "天津",

"新疆", "西藏", "云南", "浙江", "海外");

var provinceSL = document.getElementById(province);

provinceSL.options[0] = new Option("请选择省份", "all");

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

provinceSL.options[i + 1] = new Option(provinces[i], provinces[i]);

if (provinceSL.options[i + 1].value == province) {

provinceSL.selectedIndex = i + 1;

}

}

}

页面调用

   <!--initcity('province','city') 中province和city分别是省和市选择框select元素id-->

<select  onchange="initcity('province','city')" id="province">

<script type="text/javascript">

creatprovince('province');

</script>

</select>

<select  id=city>

<option  value="all">

所有城市

</option>

</select>

 

分享到:
评论

相关推荐

    很好用的js省市级联菜单

    **很好用的js省市级联菜单** 在网页开发中,级联菜单(Cascading Dropdown Menu)是一种常见的交互设计元素,常用于展示层次结构的数据,如中国的省市区选择。JavaScript作为客户端脚本语言,能够轻松实现动态交互...

    javascript实现省市级联菜单

    在网页开发中,省市级联菜单是一个常见的交互元素,它允许用户在选择省份后自动加载对应的市一级选项。本文将详细讲解如何使用JavaScript实现这样的功能,主要基于标题和描述中的内容,结合实际应用场景来深入探讨。...

    通用省市级联菜单(只要改一下省和市的名字)

    标题中的“通用省市级联菜单”指的是一个软件或网页开发中的功能模块,它通常用于用户在选择地址时提供逐级下拉的选择体验,比如选择国家、省份、城市等。这种菜单设计可以方便用户快速准确地定位到自己的位置,同时...

    用Java做的省市级联菜单

    在Java开发中,省市级联菜单是一个常见的功能,主要用于用户选择地理位置时,如省、市、区等。这种联动效果可以提升用户体验,因为用户选择一个省份后,相关的城市会自动加载出来,无需手动刷新页面。在这个场景中,...

    Jquery省市级联菜单

    **jQuery省市级联菜单详解** 在网页开发中,省市级联菜单是一种常见的交互设计,它允许用户逐级选择省份和城市,通常用于地址输入或区域筛选。jQuery作为一个轻量级的JavaScript库,提供了丰富的API和插件,使得...

    使用XML和dwr ajax 集成实现省市级联菜单

    在IT行业中,省市级联菜单是一种常见的用户界面元素,它允许用户在选择省份后自动更新相关的城市选项。这种交互方式可以提高用户体验,特别是在处理大量地理数据时。本篇将详细介绍如何利用XML、Direct Web Remoting...

    dwr+xml集成实现省市级联菜单

    在IT行业中,构建交互式用户界面是至关重要的,特别是当涉及到多级选择,如省市级联菜单时。本文将深入探讨如何使用Direct Web Remoting (DWR) 和 XML 技术在Tomcat服务器上实现这样的功能。DWR是一种Java库,它允许...

    经典Ajax省市级联菜单

    【经典Ajax省市级联菜单】是一个利用Ajax技术实现的交互式菜单系统,它通过与后台服务器的异步通信,实现了省市区数据的动态加载。在这个系统中,用户选择省份时,Ajax会向服务器发送请求,服务器响应后返回对应省份...

    HTML中JavaScript版省市级联

    "HTML中JavaScript版省市级联"是一个常见的前端技术应用,用于实现动态的省市区选择功能。在这个场景下,用户可以从一个下拉菜单中选择省份,然后根据所选省份自动更新市、区的下拉选项。这种功能在注册、地址填写等...

    全国省市级联下拉菜单

    标题 "全国省市级联下拉菜单" 暗示了这是一个网页开发相关的项目,它涉及到在没有使用数据库的情况下,创建一个动态的、无刷新的中国省市联动选择菜单。这种功能通常用于用户输入地址或者选择地理位置时,提供方便的...

    国家省市级联菜单国家省市级联菜单

    例如,`"0_20"`键对应的值是一个包含加拿大各省份名称的列表,而`"0_20_0"`键则代表了第一个省份(新不伦瑞克省)下的城市列表。 ### 4. 实现原理 级联菜单的实现通常涉及到前端技术,如JavaScript、HTML、CSS等。...

    js下拉菜单、省市级联

    JavaScript下拉菜单与省市级联是网页开发中常见的交互元素,它们主要用于提高用户在选择地理位置或选项时的体验。在本文中,我们将深入探讨这两种技术的实现方式、常见问题及优化策略。 首先,我们来讨论JavaScript...

    django实现省市县级联菜单

    在本文中,我们将深入探讨如何使用Django框架实现省市县级联菜单。Django是一个功能强大的Python Web开发框架,以其高效、简洁和可扩展性而受到广泛赞誉。在Web应用程序中,级联下拉菜单通常用于表示地理位置信息,...

    安卓 spinner 实现省市级联

    【安卓 Spinner 实现省市级联】是Android开发中常见的需求,用于在应用程序中创建一个下拉选择组件,展示省、市、区等地理层级的数据。Spinner控件在Android中广泛用于实现有限选项的选择,通常与Adapter配合使用,...

    ASP+AJAX表单验证含省市级联菜单

    在本案例中,"ASP+AJAX表单验证含省市级联菜单"是指使用ASP技术构建了一个包含AJAX(Asynchronous JavaScript and XML)功能的表单验证系统,该系统还集成了省市级联菜单功能。这个菜单在用户需要时才会通过AJAX异步...

    省市联动级联菜单

    省市联动级联菜单是一种常见的前端交互设计,常用于地址选择、地区筛选等场景。这个功能主要是通过JavaScript实现的,不需要数据库支持,所有的省份和城市数据都存储在JS文件中。这种方式简化了系统的复杂性,降低了...

    省市级联,包含省市级数据.rar

    在IT行业中,省市级联(Province-City-County Association,简称PCCA)是一种常见的数据结构和功能设计,特别是在地理信息系统、电子商务、政务服务等场景中,用于处理和展示多层次的地域层级关系。它允许用户在选择...

    js省市级联

    "省市级联"是一个常见的前端功能,主要用于实现用户在选择省份时,下拉菜单自动更新对应的城市选项,从而提供更加便捷的用户输入体验。这种功能在注册、地址填写等场景中非常常见。 在给定的"js省市级联"项目中,它...

    js省市级联下拉菜单

    在网页开发中,省市级联下拉菜单是一种常见的交互元素,用于用户选择所在省份和城市。这种菜单的设计目的是节省页面空间并提供清晰的导航。在本案例中,我们主要讨论如何使用JavaScript实现这样的功能。 首先,我们...

Global site tag (gtag.js) - Google Analytics