二级联动菜单

来源：互联网发布：windows 启动管理器编辑：程序博客网时间：2024/04/30 05:47

主要是基于二维数组和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>

效果如图：
这里写图片描述

阅读全文

0 0