省市联动

* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
　　　　

注意：

1、遍历二维数组
2、得到也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
创建option（三步）

由于每次都要向city里面添加option
第二次添加，会追加。

每次添加之前，判断一下city里面是否有option，如果有，删除

<body>

    <select id="country" onchange="add1(this.value)">
       <!-- this.value  表示当前选择的value的值-->
        <option value="0">--请选择--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="日本">日本</option>
    </select>
    <select id="cityid">
    
    </select>
  
 </body>
    <script type="text/javascript">
      
      //创建一个数组存储数据
        //二维数组
        var arr = new Array(4);
        arr[0] = ["中国","北京","上海","广州","深圳","青岛"];
        arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
        arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
        arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

        function add1(val){
        
          //alert(val);

          /*1.遍历2维数组
            2.得到也是一个数组（国家对于关系）
            3.拿到数组中的第一个值和传递过来的值进行比较
            4.如果相同，获取到第一值后面的元素
            5.得到city的select
            6.添加过去appendChild方法
          
          */


          /*
                由于每次都要想city里面添加option
                第二次添加，追加
                * 每次添加之前，判断一下city里面是否有option，如果有，删除
            */

            //获取city的select
            var city1 = document.getElementById("cityid");
            //得到city里面的option
            var options1 = city1.getElementsByTagName("option");
            //遍历数组
            for(var m=0;m<options1.length;m++) {
                //得到每一个option
                var op = options1[m];
                //删除这个option 通过父节点删除
                city1.removeChild(op);
                m--;
            }




          //遍历二维数组
          for(var i=0;i<arr.length;i++){
                //得到二维数组里面的每一个数组
                var arr1 = arr[i];
                //得到遍历之后的数组的第一个值
                var firstvalue = arr1[0];
                //判断传递过来的值和第一个值是否相同
                
                    if(firstvalue == val) { //相同
                    //得到第一个值后面的元素
                    //遍历arr1
                      for(var j=1;j<arr1.length;j++) {
                        var value1 = arr1[j]; //得到城市的名称
                        //alert(value1);
                        //创建option
                        var option1 = document.createElement("option");
                        //创建文本
                        var text1 = document.createTextNode(value1);
                        //把文本添加到option1里面
                        option1.appendChild(text1);
                        //添加值到city1里面
                        city1.appendChild(option1);
                
                    }
                    
                    }

          }
        }


    </script>