task 1：完成省城市的三级联动（包括湖南省），附代码和效果图。

2019-10-20 20:01:28 阅读：261 来源： 互联网

标签：province city task country value 效果图联动 var options

<!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>

标签：province,city,task,country,value,效果图,联动,var,options
来源： https://www.cnblogs.com/fyxx/p/11708802.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

task 1：完成省城市的三级联动（包括湖南省），附代码和效果图。