省市联动

需求：

　　　选中省的时候，动态查询当前省下的所有市，然后展示在市的下拉选中

技术分析：

　　　数组：

　　　　语法：

　　　　　　new Array();   长度为0

　　　　　　new Array(size)   指定长度的

　　　　　　new Array(e1,e2,...)  指定元素

　　　　　　非官方

　　　　　　　　var arr = ["aa","bb"];

　　　　常用属性：

　　　　　　length

　　　　注意：

　　　　　　数组是可变的

　　　　　　数组可以存放任意值

　　　　常用方法：

　　　　　　存放值：对内容的操作

　　　　　　　　pop():弹   最后一个

　　　　　　　　push()：插入  到最后

　　　　　　　　shift():删除第一个

　　　　　　　　unshift():插入到首位

　　　　　　打印数组：

　　　　　　　　join(分隔符):将数组里的元素按照指定的分隔符打印

　　　　　　拼接数组：

　　　　　　　　concat()：连接两个或更多的数组，并返回结果

　　　　　　对结构的操作：

　　　　　　　　sort();排序

　　　　　　　　reverse();反转

 

步骤分析：

　　　1.省的下拉选的选项中添加value属性，当成述责的索引

　　　2.初始化市

　　　3.选择省的时候，onchange事件

　　　4.遍历函数

　　　　　　通过获取的索引获取对象的市的数组   this.value

　　　　　　遍历数组，将数组里的每个值组装option，添加到select中即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
            arr[1] = new Array("长春市","吉林市","四平市","通化市");
            arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
            arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
        </script>
    </head>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密码:<input type="password" name="password"  value="123" disabled="disabled"><br>
            性别:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            爱好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            头像:<input type="file" name="photo"><br>
            籍贯:
                <select name="pro" onchange="selectCity(this.value)">
                    <option value="0">黑龙江</option>
                    <option value="1">吉林</option>
                    <option value="2">辽宁</option>
                    <option value="3">河南</option>
                </select>
                <select name="city">
                    <option >-请选择-</option>     
                </select>
            <br>
            自我介绍:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>
<script>
    function selectCity(index){
        
        //获取市的数组
        var arrCity = arr[index];
        //获取市的下拉选
        var arrSelectCity = document.getElementsByName("city")[0];
        //初始化市
        arrSelectCity.innerHTML = "<option >-请选择-</option>"
        for(var i = 0;i<arrCity.length;i++){
            arrSelectCity.innerHTML += ("<option>"+arrCity[i]+"</option>");
        }
    }
</script>

 

posted @ 2020-07-09 22:42  Yisennnn丶  阅读(119)  评论(0)    收藏  举报