使用javascript实现省市联动小demo

使用javascript实现省市联动小demo心得

本人以前是学习Android的，也做了一段时间的Android开发。但是Android在长沙的的需求少，同时自身也没有达到这座城市动则三年经验的要求，所以决定转型到javaweb，javascript是我学习的第一步，觉得我说的不对的请指出。Android饱和了还有javascript！输入和输出也是最好的学习方法，给自己加油。

• 本文中会涉及到的方法
  createChild 创建子节点
  createTextNode 创建文本节点
  removeChild 删除节点
  getElementById 通或ID获得对象

下面则就是我的代码块

<script type="text/javascript">
    /*
        定义其中对应的属性，通过select标签中的属性定义函数。同时由于本地的关系采用数组进行数据存储。没有采用数据库，后续会发布采用数据库的。
        this.value赋值给val
     */
    var arr = [];
        arr[0] = new Array("北京","海淀区","昌平区","朝阳区","东城区","西城区","丰台区","大兴区","怀柔区");
        arr[1] = new Array("河北","石家庄","保定","邯郸","秦皇岛","张家口","唐山","承德","廊坊");
        arr[2] = new Array("山东","济南","青岛","烟台","威海","潍坊","菏泽","临沂","淄博","济宁","聊城");
        arr[3] = new Array("河南","郑州","洛阳","信阳","安阳","南阳","开封","商丘","驻马店","平顶山");
        function run(val){
            // 获取select2
            var select2 = document.getElementById("select2");
            // 先清除掉select2下所有的子节点
            // 先获取select2下所有的子节点
            var ops = select2.getElementsByTagName("option");
            //获得和删除节点
            for(var x=0;x<ops.length;x++){
                // 获取每一个
                var op = ops[x];
                // 删除节点
                select2.removeChild(op);
                x--;
            }
            // 循环遍历
            for (var i = 0; i <arr.length; i++) {
                //定义inarr给数组arr中
                var inarr = arr[i];
                var str = inarr[0];
                if (val == str)//码代码的时候这里犯了一个很傻的错误将== 写成了 =（赋值）导致不管选择什么所有都会显示出来。 
                {
                    for (var j = 1; j<inarr.length; j++) {
                            //得到数组中的内容
                            var instr=inarr[j];
                            //将数组中的内容添加到select2中
                            var option =document.createElement("option");
                            //创建文本节点并复制给text
                            var text =document.createTextNode(instr);
                            //在option中添加子节点
                            option.appendChild(text);
                            //在select2中添加option
                            select2.appendChild(option);

                                }   
                        }
        }}

    </script>

下面是html代码块

<select id="select1" onchange="run(this.value)">
        <option>--请选择--</option>
        <option value="北京">北京</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="河南">河南</option>
    </select>

    <select id="select2">

    </select>

很简单的demo，其实还有其他的方法实现，但是这种方法是最简单的。其他方法都相较于复杂。例如函数不带参，通过后期获得value属性，这其中就增加了很多步骤。同时也更容易产生错误。

加油！今天完成了公司网站的开发，采用的是织梦的框架，项目完成也增加了我的学习时间，欣喜！