简单H5前端下拉菜单select之二级联动

Link丶林

于 2019-01-28 15:50:07 发布

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_37254866/article/details/86678590

web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的Select二级联动实现方案，通过HTML和JavaScript完成。当用户选择一级菜单时，二级菜单会根据选择动态加载相关选项，例如广西下加载南宁、梧州等城市，广东则加载广州、深圳等城市。

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

select二级联动

HTML:

一级下拉菜单

<select id="first" onchange="setSecond(this.value)">
		<option value="1">广西</option>
		<option value="2">广东</option>
</select>

二级下拉菜单

<select id="second">
</select>

JS:

function setSecond(value){
	  var val = value;
	  if(val == 1){
	    var sec = document.getElementById('second');
	    sec.options.length=0; //清空二级菜单项
	    sec.options[0] = new Option("南宁","nanning");
	    sec.options[1] = new Option("梧州","wuzhou");
	    sec.options[2] = new Option("柳州","liuzhou");
	  }else {
	    var sec = document.getElementById('second');
	    sec.options.length=0; //清空二级菜单项
	    sec.options[0] = new Option("广州","guangzhou");
	    sec.options[1] = new Option("深圳","shenzhen");
	    sec.options[2] = new Option("中山","zhongshan");
	  }
	}