下拉框联动-小demo

lilyheart1

于 2021-03-22 10:09:50 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：下拉框

本文链接：https://blog.youkuaiyun.com/lilyheart1/article/details/87701523

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的动态下拉菜单功能，当用户在第一个下拉菜单中选择不同选项时，第二个下拉菜单的内容会根据所选语言进行更新，提供英文或中文选项。该方法适用于创建多语言网站或应用程序。

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

<div>
		<select id="first" onchange="setSecond(this)">
			<option value="en">en</option>
			<option value="zh">zh</option>
		</select>
	</div>
	<div>
		<select id="second"></select>
	</div>
	<script>
		function setSecond(obj){
			var val = obj.value;
			if(val == "en"){
				var sec = document.getElementById('second');
				sec.innerHTML = "<option>one</option><option>two</ption>";
			}else{
				var sec = document.getElementById('second');
				sec.innerHTML = "<option>一</option><option>二</option>";
			}
		}
	</script>