【第六章】操作下拉框

最新推荐文章于 2022-11-25 20:16:04 发布

JavaScript豆豆

最新推荐文章于 2022-11-25 20:16:04 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/qq_45695622/article/details/103170205

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作下拉框</title>
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<div class "first">
		<select multiple 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>
		<lect>
		<div class="sd">
		<button id="add">添加>> <tton> <br/><br/>
		<button id="add_all"> 全部添加>> <tton>
		</div>
	    </div>
		<div class="second">
		<select multiple name="other" id="other" class="sel"><lect>
		<div class="sd">
		<button id="to_left"><< 删除<tton><br/><br/>
		<button id="all _to_left"><<全部删除 <tton>
		</div>
		</div>
		<script>
			$(function(){
			$("#add").click(function(){
			var $options = $("#hobby option:selected");           //获取左边选中项
			$options.appendTo("#other");                          //追加到右边
			})
			
			
			$("#add_all").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=$("#oher option:selected");              //获取右边选中项
			$options. appendTo("#hobby");                         //追加到左边
			})
			
			$("#all_to_left").click(function(){
			var $options = $("#other option");                    //获取全部选项
			$options. appendTo("#hobby");                         //追加到左边
			})
			
			$("#other").dblclick(function(){                      //鼠标双击事件
			var $options=$("option:selected",this);               //获取选中项
			$options.appendTo("#hobby");                          //追加到左边
			})
			})

		</script>
	</body>
<html>

JavaScript豆豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第六章】操作下拉框

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>操作下拉框</title> <script language="JavaScript" src="js/jquery-1.11.1.min.js"></script> ...
复制链接

扫一扫