jquery操作下拉框

最新推荐文章于 2022-09-14 11:17:25 发布

laity01

最新推荐文章于 2022-09-14 11:17:25 发布

阅读量239

点赞数

分类专栏：练习文章标签： js jquery

本文链接：https://blog.csdn.net/m0_57675124/article/details/118225332

版权

练习专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.first {
				font-size: 24px;
				float: left;
			}

			.second {
				padding-left: 110px;
				font-size: 24px;
			}
			.sel{
				width: 80px;
				height: 150px;
			}
			.sd{
				padding-top: 10px;
			}
		</style>
	</head>
	<body>
			<div class="first">
				<select multiple size="10" name="hobby" id="hobby" class="sel">
					<option value="伽罗">伽罗</option>
					<option value="孙膑">孙膑</option>
					<option value="马超">马超</option>
					<option value="嫦娥">嫦娥</option>
					<option value="韩信">韩信</option>
					<option value="阿珂">阿珂</option>
					<option value="娜可露露">娜可露露</option>
					<option value="露娜">露娜</option>
					<option value="妲己">妲己</option>
					<option value="小乔">小乔</option>
					<option value="周瑜">周瑜</option>
					<option value="大乔">大乔</option>
					<option value="孙策">孙策</option>
					<option value="孙尚香">孙尚香</option>
					<option value="刘备">刘备</option>
					<option value="张良">张良</option>
				</select>
				<div class="sd">
					<button id="add">添加>></button><br /><br>
					<button id="tj">全部添加>></button>
				</div>
			</div>
			<div class="second">
				<select multiple size="10" name="other" id="other" class="sel">

				</select>
				<div class="sd">
					<button id="to_left"><<删除</button> <br /><br>
						<button id="sc"><<全部删除</button> 
				</div>
				 </div>
				   <script src="js/jquery-3.6.0.min.js"></script>
								<script>
									$(function() {
										//获取左边，追加到右边
										$('#add').click(function() {
											var $options = $('#hobby option:selected');
											$options.appendTo('#other')
										})
										//获取全部选项，追加到右边
										$('#tj').click(function() {
											var $options = $("#hobby option");
											$options.appendTo("#other");
										})
										//鼠标双击事件，追加到右边
										$('#hobby').dblclick(function() {
											var $options = $('option:selected', this);
											$options.appendTo('#other');
										})

										//获取右边，追加到左边
										$('#to_left').click(function() {
											var $options = $('#other option:selected');
											$options.appendTo('#hobby')
										})
										//获取全部选项，追加到左边
										$('#sc').click(function() {
											console.log('aaa');
											var $options = $('#other option');
											$options.appendTo('#hobby');
										})
										//鼠标双击事件，追加到左边
										$('#other').dblclick(function() {
											var $options = $('option:selected', this);
											$options.appendTo('#hobby');
										})
									})
								</script>
	</body>
</html>

laity01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery操作下拉框

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .first { font-size: 24px; float: left; } .second { padding-left: 110px; font-size: 24px; } .sel{.
复制链接

扫一扫