JavaScript结合HTML DOM实现联动菜单

一、前言

JavaScript结合HTML DOM可实现动态操作HTML文档的功能，通常用于创建富交互网页。本文将讲解如何使用JavaScript结合HTML DOM实现联动菜单。

二、准备工作

在使用JavaScript结合HTML DOM实现联动菜单前，需准备如下工作：

编写HTML代码，包含两个或以上select控件，其中一个为主控控件，另外的为从属控件；
在HTML代码中设置script标签，用于书写JavaScript代码；
在CSS样式表中设置控件样式；
编写JavaScript代码，实现控件联动效果。

三、示例1

下面是一个简单的示例，此示例包含两个select控件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>联动菜单</title>
    <style>
        select{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <select id="first" onchange="change()">
        <option value="1">苹果</option>
        <option value="2">小米</option>
        <option value="3">华为</option>
    </select>

    <select id="second">
        <option value="1">iPhone</option>
        <option value="1">iPad</option>
        <option value="2">Redmi</option>
        <option value="2">小米电视</option>
        <option value="3">P40</option>
        <option value="3">Mate 40 Pro</option>
    </select>

    <script>
        function change(){
            var firstValue=document.getElementById("first").value;
            var second=document.getElementById("second"); 
            second.length=0;
            if(firstValue=="1"){
                var option1=new Option("iPhone","1");
                var option2=new Option("iPad","2");
                second.options.add(option1);
                second.options.add(option2);
            }else if(firstValue=="2"){
                var option1=new Option("Redmi","1");
                var option2=new Option("小米电视","2");
                second.options.add(option1);
                second.options.add(option2);
            }else if(firstValue=="3"){
                var option1=new Option("P40","1");
                var option2=new Option("Mate 40 Pro","2");
                second.options.add(option1);
                second.options.add(option2);
            }
        }
    </script>
</body>
</html>

首先，我们需要编写两个select控件，一个为主控控件（id为first），另一个为从属控件（id为second），并设置主控控件的onchange事件，调用change函数。

在change函数中，我们通过document.getElementById方法获取主控控件的值，并根据不同的值生成对应的option元素。然后，我们通过second.options.add方法将option元素添加到从属控件中。

四、示例2

下面是另一个示例，此示例包含三个select控件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>联动菜单</title>
    <style>
        select{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <select id="province" onchange="changeProvince()">
        <option value="">请选择</option>
        <option value="上海市">上海市</option>
        <option value="浙江省">浙江省</option>
        <option value="江苏省">江苏省</option>
    </select>

    <select id="city" onchange="changeCity()">
        <option value="">请选择</option>
    </select>

    <select id="district">
        <option value="">请选择</option>
    </select>

    <script>
        var cityData={
            "浙江省":["杭州市","宁波市","温州市"],
            "江苏省":["南京市","苏州市","镇江市"],
            "上海市":["黄浦区","徐汇区","长宁区"]
        };
        var districtData={
            "杭州市":["西湖区","拱墅区","下城区"],
            "宁波市":["海曙区","江东区","江北区"],
            "温州市":["鹿城区","龙湾区","瓯海区"],
            "南京市":["玄武区","白下区","建邺区"],
            "苏州市":["姑苏区","吴中区","相城区"],
            "镇江市":["京口区","润州区","丹徒区"],
            "黄浦区":["外滩","南京路","董家渡"],
            "徐汇区":["漕河泾","斜土路","上海南站"],
            "长宁区":["仙霞新村","虹桥店","北新泾"]
        };
        function changeProvince(){
            var provinceValue=document.getElementById("province").value;
            var city=document.getElementById("city"); 
            city.length=0;
            var district=document.getElementById("district"); 
            district.length=0;
            if(provinceValue!=""){
                for(var i=0;i<cityData[provinceValue].length;i++){
                    var option=new Option(cityData[provinceValue][i],cityData[provinceValue][i]);
                    city.options.add(option);
                }
            }else{
                var option=new Option("请选择","");
                city.options.add(option);
                district.options.add(option);
            }
        }
        function changeCity(){
            var provinceValue=document.getElementById("province").value;
            var cityValue=document.getElementById("city").value;
            var district=document.getElementById("district"); 
            district.length=0;
            if(cityValue!=""){
                for(var i=0;i<districtData[cityValue].length;i++){
                    var option=new Option(districtData[cityValue][i],districtData[cityValue][i]);
                    district.options.add(option);
                }
            }else{
                var option=new Option("请选择","");
                district.options.add(option);
            }
        }
    </script>
</body>
</html>

首先，我们需要编写三个select控件，分别为省份控件（id为province）、城市控件（id为city）和区县控件（id为district）。

然后，我们需要编写一个cityData数组和一个districtData数组，用来存储城市和区县数据。

在changeProvince函数中，我们通过document.getElementById方法获取省份控件的值，并根据不同的值生成对应的option元素。然后，我们通过city.options.add方法将option元素添加到城市控件中。

在changeCity函数中，我们通过document.getElementById方法获取城市控件的值，并根据不同的值生成对应的option元素。然后，我们通过district.options.add方法将option元素添加到区县控件中。

五、总结

通过使用JavaScript结合HTML DOM实现联动菜单，我们可以轻松地实现复杂的数据筛选和显示功能。在实现过程中，我们需要注意控件样式的调整和JavaScript代码的书写，同时，建议对控件数据进行预处理，以提高代码的可读性和可维护性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript结合HTML DOM实现联动菜单 - Python技术站