省市联动效果

最新推荐文章于 2019-05-05 19:53:00 发布

戴少哥

最新推荐文章于 2019-05-05 19:53:00 发布

阅读量4.7k

点赞数

分类专栏： JavaScript 文章标签： javascript html action function 平台

本文链接：https://blog.csdn.net/daizhonghai1314/article/details/7420951

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//利用已经得到的数据，将这些数据组织到JavaScript的数组中
var aryData = new Array();

aryData["北京直辖市"] = "东城区,西城区,崇文区,宣武区,朝阳区,海淀区,丰台区,石景山区,房山区,通州区,顺义区,大兴区,昌平区,平台区,怀柔区,门头沟区,密云县,延庆县".split(",");

aryData["上海直辖市"] = "".split(",");

aryData["天津直辖市"] = "".split(",");

aryData["重庆直辖市"] = "".split(",");

aryData["香港特别行政区"] = "".split(",");

aryData["澳门特别行政区"] = "".split(",");

aryData["黑龙江省"] = "哈尔滨市,齐齐哈尔市,牡丹江市,佳木斯市,大庆市,鸡西市,双鸭山市,伊春市,七台河市,鹤岗市,黑河市,绥化市,大兴安岭地区".split(",");

aryData["吉林省"] = "长春市,吉林市,四平市,辽源市,通化市,白山市,松原市,白城市,延边朝鲜族自治州".split(",");

aryData["辽宁省"] = "沈阳市,大连市,鞍山市,抚顺市,本溪市,丹东市,锦州市,营口市,阜新市,辽阳市,盘锦市,铁岭市,朝阳市,葫芦岛市".split(",");

aryData["河北省"] = "石家庄市,邯郸市,保定市,承德市,唐山市,廊坊市,沧州市,衡水市,邢台市,秦皇岛市,张家口市".split(",");

aryData["山西省"] = "太原市,大同市,阳泉市,长治市,晋城市,朔州市,晋中市,运城市,忻州市,临汾市,吕梁市".split(",");

aryData["青海省"] = "西宁市,海北藏族自治州,黄南藏族自治州,海南藏族自治州,果洛藏族自治州,玉树藏族自治州,海西藏族自治州,海东地区".split(",");

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

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

aryData["江苏省"] = "南京市,镇江市,常州市,无锡市,苏州市,南通市,扬州市,盐城市,连云港市,徐州市,泰州市,宿迁市".split(",");

aryData["安徽省"] = "合肥市,蚌埠市,芜湖市,淮南市,马鞍山市,淮北市,铜陵市,安庆市,黄山市,阜阳市,宿州市,滁州市,六安市,宣城市,巢湖市,池州市,亳州市".split(",");

aryData["浙江省"] = "杭州市,宁波市,温州市,绍兴市,嘉兴市,湖州市,金华市,衢州市,舟山市,台州市,丽水市".split(",");

aryData["福建省"] = "福州市,厦门市,宁德市,莆田市,泉州市,漳州市,龙岩市,三明市,南平市".split(",");

aryData["江西省"] = "南昌市,九江市,景德镇市,宜春市,新余市,萍乡市,鹰潭市,赣州市,上饶市,吉安市,抚州市".split(",");

aryData["湖南省"] = "长沙市,株洲市,湘潭市,衡阳市,邵阳市,岳阳市,常德市,张家界市,益阳市,郴州市,永州市,怀化市,娄底市,湘西土家族苗族自治州".split(",");

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

aryData["广东省"] = "广州市,深圳市,珠海市,汕头市,韶关市,佛山市,江门市,湛江市,茂名市,肇庆市,惠州市,梅州市,汕尾市,河源市,阳江市,清远市,东莞市,中山市,潮州市,揭阳市,云浮市".split(",");

aryData["海南省"] = "海口市,三亚市".split(",");

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

aryData["陕西省"] = "西安市,宝鸡市,咸阳市,渭南市,铜川市,延安市,榆林市,汉中市,安康市,商洛市".split(",");

aryData["四川省"] = "成都市,自贡市,攀枝花市,泸州市,德阳市,绵阳市,广元市,遂宁市,内江市,乐山市,南充市,眉山市,宜宾市,广安市,达州市,雅安市,巴中市,资阳市,阿坝藏族羌族自治州,甘孜藏族自治州,凉山彝族自治州".split(",");

aryData["贵州省"] = "贵阳市,六盘水市,遵义市,安顺市,黔南布依族苗族自治州,黔西南布依族苗族自治州,黔东南苗族侗族自治州,同仁地区,毕节地区".split(",");

aryData["云南省"] = "昆明市,曲靖市,玉溪市,保山市,昭通市,丽江市,普洱市,临沧市,德宏傣族景颇族自治州,怒江傈僳族族自治州,迪庆藏族自治州,大理白族自治州,楚雄彝族自治州,红河哈尼族彝族自治州,文山壮族苗族自治州,西双版纳傣族自治州".split(",");

aryData["内蒙古自治区"] = "呼和浩特市,包头市,乌海市,赤峰市,通辽市,鄂尔多斯市,呼伦贝尔市,巴彦淖尔市,乌兰察布市,兴安盟,锡林郭勒盟,阿拉善盟".split(",");

aryData["新疆维吾尔族自治区"] = "乌鲁木齐市,克拉玛依市,石河子市,阿拉布市,图木舒克市,五家渠市,北屯市,哈密地区,吐鲁番地区,阿克苏地区,喀什地区,和田地区,塔城地区,阿泰勒地区,伊犁哈萨克族自治州,博尔塔拉蒙古族自治州,昌吉回族自治州,巴音郭楞蒙古族自治州,克孜勒苏柯尔克孜自治州".split(",");

aryData["西藏自治区"] = "拉萨市,拉萨市,拉萨市,拉萨市,拉萨市,拉萨市,拉萨市,拉萨市,拉萨市".split(",");

aryData["宁夏回族自治区"] = "银川市,石嘴山市,吴忠市,固原市,中卫市".split(",");

aryData["广西壮族自治区"] = "南宁市,柳州市,桂林市,梧州市,北海市,防城港市,钦州市,贵港市,玉林市,白色市,贺州市,河池市,来宾市,崇左市".split(",");

aryData["台湾省"] = "".split(",");

//事件处理函数，处理下拉列表被选择时要进行的动作
function itemChanged() {
    //获得“省份”下拉列表中选择的值
    var province = document.myForm.selProvince.value;

    //先清空selCities中的原有选项
    document.myForm.selCities.options.length = 0;
    document.myForm.selCities.options.disabled = "";

    for (var i = 0; i < aryData[province].length; i++)
    {
      var op = new Option(aryData[province][i], aryData[province][i]);
      document.myForm.selCities.add(op);
    }
}
</script>
    <title>省市联动效果</title>
</head>

<body>
<h1>省市联动</h1>

<form name="myForm" method="post" action="">
请选择省：
<select name="selProvince" οnchange="itemChanged()">
   <option>--您还没有选择省--</option>

    <option value="北京直辖市">北京直辖市</option>

    <option value="上海直辖市">上海直辖市</option>

    <option value="天津直辖市">天津直辖市</option>

    <option value="重庆直辖市">重庆直辖市</option>

    <option value="香港特别行政区">香港特别行政区</option>

    <option value="澳门特别行政区">澳门特别行政区</option>

    <option value="黑龙江省">黑龙江省</option>

    <option value="吉林省">吉林省</option>

    <option value="辽宁省">辽宁省</option>

    <option value="河北省">河北省</option>

    <option value="山西省">山西省</option>

    <option value="青海省">青海省</option>

    <option value="山东省">山东省</option>

    <option value="河南省">河南省</option>

    <option value="江苏省">江苏省</option>

    <option value="安徽省">安徽省</option>

    <option value="浙江省">浙江省</option>

    <option value="福建省">福建省</option>

    <option value="江西省">江西省</option>

    <option value="湖南省">湖南省</option>

    <option value="湖北省">湖北省</option>

    <option value="广东省">广东省</option>

    <option value="海南省">海南省</option>

    <option value="甘肃省">甘肃省</option>

    <option value="陕西省">陕西省</option>

    <option value="四川省">四川省</option>

    <option value="贵州省">贵州省</option>

    <option value="云南省">云南省</option>

    <option value="内蒙古自治区">内蒙古自治区</option>

    <option value="新疆维吾尔族自治区">新疆维吾尔族自治区</option>

    <option value="西藏自治区">西藏自治区</option>

    <option value="宁夏回族自治区">宁夏回族自治区</option>

    <option value="广西壮族自治区">广西壮族自治区</option>

    <option value="台湾省">台湾省</option>

</select>
请选择城市：
<select name="selCities" disabled="disabled">
<option>--您还没有选择省--</option>
</select>
</form>
</body>
</html>