二级联动及左右select选择

最新推荐文章于 2023-03-15 11:42:35 发布

颜词

最新推荐文章于 2023-03-15 11:42:35 发布

阅读量5.6k

点赞数 3

分类专栏： js 文章标签： js jQuery 二级联动左右select选择

本文链接：https://blog.csdn.net/qq_45398309/article/details/99705527

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

如何实现二级联动
- 何为二级联动
- 例子
左右select选择

如何实现二级联动

何为二级联动

二级联动在网页中是很常见的！而何为二级联动呢？
有两个下拉框，下拉框中分别是城市以及地区，当你选择第一个下拉框中城市的时候，第二个下拉框的会显示所属城市的地区！这就是所谓的二级联动！具体咱来举个例子！

例子

首先我们先来简单的写两个下拉框并分别给个id，如下：

<body>
	<select id="city">
		<option value="">请选择</option>
		<option value="HB">湖北</option>
		<option value="JS">江苏</option>
		<option value="JX">江西</option>
	</select>
	<select id="area">
		<option>请选择</option>
	</select>
</body>

那么如何用js（JavaScript）实现二级联动呢？其实很简单的，那么我们就来简单分析一下，选择下拉框1让下拉框2有所实现，那么肯定是有一个点击事件，而函数中写的就是我们实现的功能，这里可以用switch语句实现哦！如下：

<script type="text/javascript">
	var city=document.getElementById("city");//获取第一个下拉框
	city.onclick=function(){				//	给第一个下拉框绑定点击事件
		var val=city.value;			//获取第一个下拉框中option的值
		switch(val){						//利用switch语句给第二个下拉框插入值
			case 'HB':
			document.getElementById("area").innerHTML="<option>武汉市</option><option>荆州市</option><option>孝感市</option>";
			break;
			case "JS":
			document.getElementById("area").innerHTML="<option>南京市</option><option>苏州市</option><option>南通市</option>";
			break;
			case "JX":
			document.getElementById("area").innerHTML="<option>南昌市</option><option>赣江市</option><option>九江市</option>";
			break;
//				default:
//				alert("error");
			
		}
	}
</script>

在这里插入图片描述
这样一个简单的二级联动就完成了，当然有很多做法，本文中的不是最佳哦！嘿嘿！

左右select选择

对于我这种语文不好的人来说叙述真的是一件难事，那让我们直接“上菜”。
在这里插入图片描述
我们如何用jQuery实现这个呢？咳咳，下面由本文小白作者来给你们简单的实现一下！话不多说。直接开干！
首先我们来弄（neng：四声哦！）出来这几个按钮和左右框框！
因为内容不是很多，css我就采用“内嵌式”直接写喽。

<body>	//我们给按钮和框框都加一个id方便使用（选择）
	<table>		//布局我采用了表格，很多方法，可以自己选择哦！
		<tr>
			<td>
				<select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
					<option>a</option>		
					<option>b</option>
					<option>c</option>
					<option>d</option>
					<option>f</option>
				</select>
			</td>
			<td>
				<input id="left1" type="button" value=">" style="width:50px"/> <br/>
				<input id="left2" type="button" value=">>" style="width:50px"/> <br/>
				<input id="left3" type="button" value=">>>" style="width:50px"/> <br/>
			
				<input id="right1" type="button" value="<" style="width:50px"/> <br/>
				<input id="right2" type="button" value="<<" style="width:50px"/> <br/>
				<input id="right3" type="button" value="<<<" style="width:50px"/> <br/>
			</td>
			<td>
				<select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">
				</select>
			</td>
		</tr>
	</table>
</body>

只是简单的界面实现我就没有写注释了！嘿嘿！
布局之类的东西搞完了接下里就是功能的实现，还是那句话，这里你也有很多实现方法，js啊，jQuery啊，，，，，仅当参考，不是最佳！

//引入jQuery
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//给按钮绑定点击事件
			$("#left1").click(function(){
				//选择左框框中的option，多个选中状态下点击按钮取第一个元素移动过去，移动过去后取消选中状态
				$("#leftSelectId option:selected:first").removeAttr("selected").appendTo("#rightSelectId");
			
			});
			
			$("#left2").click(function(){
				//选择左框框中的option，多个选中状态下点击按钮一起移动过去
				$("#leftSelectId option:selected").appendTo("#rightSelectId");

			});
			
			$("#left3").click(function(){
				//选择左框框中的option，点击按钮全部移动过去
				 $("#leftSelectId option").appendTo("#rightSelectId");
				
			});
			//下面跟左框框原理一样，只不过是改成了右框框
			$("#right1").click(function(){
				$("#rightSelectId option:selected:first").removeAttr("selected").appendTo("#leftSelectId");

			});
			
			$("#right2").click(function(){
				$("#rightSelectId option:selected").appendTo("#leftSelectId");

			});
			
			$("#right3").click(function(){
				 $("#rightSelectId option").appendTo("#leftSelectId");
				
			});
			
		});

	</script>

在这里插入图片描述

这样一个用jQuery简单实现左右select选择就完成啦！
好啦！本文就到这里啦，记录学习的每个过程，方便正在学习的他人，希望对您有所帮助。