JS实现省份、城市的级联选择
实现省份、城市的级联选择,可以用纯JS实现,当然也可以使用jquery实现,下面就讲一下如何用纯javascript实现。
其实实现JS这个很简单,有两点需要注意:
1、对省份的下拉框的onchange事件进行监听,一旦省份被改变,那么就去xml资源文件里获取对应的城市,创建新的option节点,将之挂载在城市节点下。
2、有个地方需要注意,在监听事件里,首先需要先删除除city下第一个子节点外的所有的option节点,这是清除上一次的选择信息。
3、在清除上次选择的城市的时候,需要注意获得的城市节点数组的长度是不断变化的。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js-9.html</title>
<script type="text/javascript">
window.onload=function(){
var provinceNode=document.getElementById('province');
provinceNode.onchange=function(){
//清除city节点的所有子节点(除第一个节点)
var cityNode=document.getElementById('city');
var cityNodeOptions=cityNode.getElementsByTagName('option');
var len=cityNodeOptions.length;
for(var i=1;i<len;i++){
//每次都清除第2个,因为数组cityNodeOptions的长度是动态变化的