省市联动

需求:

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

技术分析:

   数组:

    语法:

      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 = ""
        for(var i = 0;i<arrCity.length;i++){
            arrSelectCity.innerHTML += (""+arrCity[i]+"");
        }
    }
script>

 

你可能感兴趣的:(省市联动)