第二个作业

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    
    <script>
        var arr = [1,2,3,4,2,5,6,2,7,2];
        var arr2 = arr.filter(function(item){
            if(item != 2){
                return true
            }
        })
        console.log(arr2)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div{
            width: 400px;
            height: 400px;
            background-color:#ccc;
            margin: 100px auto;
        }
        .add{
            border: 10px double red;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <input type="button" value="change" id="change">
    <script>
        var btn = document.getElementById('change');
        var div = document.getElementById('div')
        btn.onclick = function(){
            div.classList.add('add')
        }
    </script>
</body>
</html>

猜你喜欢