htmlDOM二级联动_html dom select 二级联通-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35257397/article/details/52750086

本文介绍了一种通过JavaScript实现的选项二级联动效果。该方法利用HTML的<select>元素结合XML文件存储的数据，实现了省份和城市之间的联动选择。当用户选择省份时，相应的城市列表会动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项的二级联动</title>
    <script type="text/javascript" src="C:\Users\why\Desktop\html\util.js">
    //上面导入一个带有省份和城市的xml</script>
    <script type="text/javascript">
    //当页面加载完毕,把省份添加进select中
    window.onload=function () {
        //拿到2个select对象
        var sfobj = document.getElementById('sf');
        var cityobj = document.getElementById('city');
        //添加请选择的初始化框
        sfobj.add(new Option("请选择",""));
        cityobj.add(new Option("请选择",""));
        //加载Xml,获取到Document 对象
        var xmlDoc = loadXMLDoc("LocList.xml");
        //从xml中读取所有省份,添加到省份选项中
        var xmlStateNodes = xmlDoc.getElementsByTagName('State');
        for (var i = 0; i < xmlStateNodes.length; i++) {
            //为每一个Option设置属性
            var xmlStateName = xmlStateNodes[i].getAttribute("Name");
            var xmlStateCode = xmlStateNodes[i].getAttribute("Code");
            //添加到省份select 中
            sfobj.add(new Option(xmlStateName,xmlStateCode));
        }
        //给身份注册onchange 事件
        sfobj.onchange=function () {
            //每次重选要清空
            cityobj.length=0;
            //cityobj.add(new Option("--请选择-"));
            if (this.value!="") {
                //在XML中查找所有的state 标签看谁的属性和value一样   
                for (var i = 0; i < xmlStateNodes.length; i++) {
                 var xmlStateCode   = xmlStateNodes[i].getAttribute("Code");
                 if (this.value==xmlStateCode) {
                    //得到所有的子标签
                 var    xmlCityNodes = xmlStateNodes[i].getElementsByTagName("City");
                  for (var j = 0; j < xmlCityNodes.length; j++) {
                    //设置属性
                    var xmlCityName  =  xmlCityNodes[j].getAttribute("Name");
                    var xmlCityCode = xmlCityNodes[j].getAttribute("Code");
                    //添加属性
                    cityobj.add(new Option(xmlCityName,xmlCityCode));

                    }
                    break;  

                 }
                }
            }
        }


    }



    </script>

</head>
<body>
    收货地址:   <select id="sf" name="sf" ></select>
<select id="city" name="city" > </select>   
</body>
</html>