js 级联菜单

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

sksjxx

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

阅读量323

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sksjxx/article/details/121730809

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="da" οnchange="selcity()">
    <option>--吃什么--</option>
    <option>早餐</option>
    <option>午饭</option>
    <option>晚餐</option>
    <option>夜宵</option>
</select>
<select id="sw">
    <option>--吃什么--</option>
</select>
</body>
<script type="text/javascript">
    function selcity(){
        let str = [["--吃什么--"],["包子","胡辣汤","饺子","豆浆"],["米","面条","牛肉汤","不吃了"],
            ["豆腐脑","面条","羊肉汤","水果"],["酸辣粉","龙虾","牛肉","汉堡"]];
        let index = document.getElementById("da").selectedIndex;
        //selectedIndex: 属性可设置或返回下拉列表中被选选项的索引号。
        let er = document.getElementById("sw");
        let yi=str[index];
        er.options.length = 0;//清空之前选项
        //如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
        //如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
        //如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
        for (let i = 0; i < yi.length; i++) {
            let option2 = document.createElement("option");
            //.createElement:指定名称创建一个元素
            option2.innerText=yi[i];
            er.appendChild(option2)
            //选择添加到子选项中
        }
    }
</script>
</html>

sksjxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 级联菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select id="da" onchange="selcity()"> <option>--吃什么--</option> <optio...
复制链接

扫一扫