<!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>
js 级联菜单
最新推荐文章于 2024-07-22 17:44:20 发布