js实现省份、城市的级联选择

最新推荐文章于 2024-07-22 17:44:20 发布

请叫我林小李

最新推荐文章于 2024-07-22 17:44:20 发布

阅读量9.8k

点赞数 1

分类专栏： java-web 文章标签： javascript xml

本文链接：https://blog.csdn.net/qq_25237663/article/details/49968113

版权

这篇博客介绍了如何使用纯JavaScript实现省份和城市的级联选择功能。通过监听省份选择框的onchange事件，从XML资源文件中动态加载并创建城市选项。在切换省份时，先清空之前的城市选项，然后加载对应省份的城市数据。

摘要由CSDN通过智能技术生成

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的长度是动态变化的