二级联动菜单

最新推荐文章于 2024-09-10 14:15:01 发布

sgzhm4444

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量426

点赞数

文章标签： html dom javascript

本文链接：https://blog.csdn.net/sgzhm_casco/article/details/77652020

版权

主要是基于二维数组和JS中DOM的节点操作，构建了一个二级联动菜单，HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
</head>
<body>
    省:
    <select id="province" onchange="change();">
        <option value="0">请选择</option>  
        <option value="1">河北省</option>
        <option value="2">江苏省</option>
        <option value="3">山东省</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：
    <select id="city">
        <option>请选择</option>
    </select>
</body>
</html>

JS代码如下：

<script type="text/javascript">
    var cities = [
        ["请选择"],
        ["廊坊","石家庄","承德"],
        ["杭州","宁波","温州"],
        ["青岛","济南","烟台"]
    ];

    function change(){
        var select = document.getElementById("province");
        var pindex = province.value;
        var city = document.getElementById("city");
        city.innerHTML="";
        var pcities = cities[pindex];
        for (var i = 0; i < pcities.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value",i);
            option.innerHTML = pcities[i];
            city.appendChild(option);
        }
    }
</script>