javascript省市联动模块

来源：互联网发布：abb机器人编程100例编辑：程序博客网时间：2024/04/29 22:27

效果图

实现思路

1,创建两个select选择框
2,创建一个二维数组存储第二个选择框的内容
3,通过getElementById获取创建好的两个select对象
4,通过getElementsByTagName拿到子标签
5,遍历二维数组
6,通过appendChild添加到第二个选择框中

代码

<body>    <select id="suShe" onchange="getName(this.value);">        <option value="0">--宿舍--</option>        <option value="401">401</option>        <option value="402">402</option>        <option value="403">403</option>        <option value="404">404</option>    </select>    <select id="name">        <option value="1">--姓名--</option>    </select><script type="text/javascript">function getName(value){    var select_2 = document.getElementById("name");    var names = select_2.getElementsByTagName("option");//如果select中有对象，就取出并删除    for(var x=0; x<names.length; x++){        select_2.removeChild(names[x]);        x--;    }    var arr = new Array(4);    arr[0] = ["401","胡君凯","张浩强","王波","禹智深","孟志昇","韩松华"]    arr[1] = ["402","谢家瑞","周游","胡昌富","缪涛","言旭","灿哥"]    arr[2] = ["403","朱继东","王春林","何丑坤","谭敏","张天明","王耀龙"]    arr[3] = ["404","罗绍权","香菇月","李海峰","李涛","赵建鹏","黄朝东"]    var select_1 = document.getElementById("suShe");    var sushes = select_1.getElementsByTagName("option");    for(var x=0; x<arr.length; x++){        for(var y=0; y<arr[x].length; y++){            if(value==arr[x][y]){                for(var i=1;i<arr[x].length;i++){                    //alert();                    //select_2.appendChild("<option>arr[x][i]</option>");(错误写法)                    var option1 = document.createElement("option");//创建option                    var text = document.createTextNode(arr[x][i]);//获取对应数组元素存入text中                    option1.appendChild(text);//将text添加到option中                    select_2.appendChild(option1);//将option添加到select中                }            }        }    }}</script></body>

需要注意的问题

一，在创建数组之前，先要判断第二个选择框中是否有数据，如果有要把这些数据清空
二，将数组元素添加到选择框中的三个步骤

1，通过createElement创建option

2，通过createTextNode创建text，并将数组元素添加到text中

2，通过appendChild将text添加到option中

2，通过appendChild将option添加到第二个选择框中

1 0