js联动菜单Demo

最新推荐文章于 2023-01-11 14:01:46 发布

古哒哒

最新推荐文章于 2023-01-11 14:01:46 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/kali0308/article/details/47731493

本文提供了一个使用JavaScript实现的简单下拉菜单示例。该示例展示了如何根据用户选择的省份来动态加载对应的城市选项。通过分析JavaScript代码，读者可以了解到如何利用DOM操作和事件监听来更新HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<script>
var arr = [
['朝阳','海淀','房山'],
['济南','青岛','烟台']
]


function ld()
{
var sel = document.getElementById('sheng');
var opt = "";
if(sel.value=='-1'){document.getElementById('shi').innerHTML = opt;}
for(var i = 0;i<arr[sel.value].length;i++)
{
opt = opt+'<option value="'+i+'">'+arr[sel.value][i]+'</option>';

}
document.getElementById('shi').innerHTML = opt;
}
</script>
</head>
<body>

<select id='sheng' onchange='ld()'>
<option value='-1'>请选择</option>
<option value='0'>北京</option>
<option value='1'>山东</option>
</select>
<select id='shi'></select>
</body>
</html>