task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。

Posted chenqintaotao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title>完成省城市的三级联动(包括湖南省),附代码和效果图。</title>
</head>
<body>
 <select id="province">
   <option value="-1">请选择</option>
 </select>
 <select id="city"></select>
 <select id="country"></select>
 <script type="text/javascript">
   var provinceArr = [上海,江苏,河北,湖南];
   var cityArr = [
                  [上海市],
                  [苏州市,南京市,扬州市],
                  [石家庄,秦皇岛,张家口],
                  [长沙市,株洲市,湘潭市]
                 ];
    var countryArr =[ 
                     [
                      [黄浦区,静安区,长宁区,浦东区]
                     ],
                     [
                      [虎丘区,吴中区,相城区,姑苏区,吴江区],
                      [玄武区,秦淮区,建邺区,鼓楼区,浦口区],
                      [邗江区,广陵区,江都区]
                     ],
                     [
                      [长安区,桥西区‘,‘新华区‘,‘井陉矿区‘],
                      [‘海港区‘,‘山海关区‘,‘北戴河区‘,‘抚宁区‘],
                      [‘桥东区‘,‘桥西区‘,‘宣化区‘,‘下花园区‘]
                     ],
                     [
                      [‘芙蓉区‘,‘岳麓区‘,‘天心区‘,‘开福区‘],
                      [‘荷塘区‘,‘芦淞区‘,‘石峰区‘,‘天元区‘],
                      [‘雨湖区‘,‘岳塘区‘]
                     ]
                    ];
    function creatOption(obj,data){
        for(var i in data){
            var op = new Option(data[i],i);
            obj.options.add(op);
        }
    }
    var province = document.getElementById(‘province‘);
    creatOption(province,provinceArr);   

    var city = document.getElementById("city");
    province.onchange = function(){
        city.options.length = 0;
        creatOption(city,cityArr[province.value]);
        if(province.value >= 0){
            city.onchange();
        }else{
            country.options.length = 0;
        }
    };

    var country = document.getElementById("country");
    city.onchange = function(){
        country.options.length = 0;
        creatOption(country,countryArr[province.value][city.value]);
    };              
 </script>
</body>
</html>

以上是关于task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。的主要内容,如果未能解决你的问题,请参考以下文章

三级联动

js三级联动

ajax(省,市,县)三级联动

省市县三级联动sql文件

省县市三级联动

WinForm Timer控件,三级联动[省,市,区]