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

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