使用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属性，这其中就增加了很多步骤。同时也更容易产生错误。

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