jQuery 案例（下拉选择框右移）

最新推荐文章于 2022-03-29 21:45:06 发布

boxyuan

最新推荐文章于 2022-03-29 21:45:06 发布

阅读量561

点赞数

分类专栏： JQuery 文章标签：前端 JQuery

本文链接：https://blog.csdn.net/boxyuan/article/details/72853871

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

* jQuery中DOM常用方法或属性

1)val()：取得标签中value属性的值
2)html()：取得标签内的内容
3)size()或length：取得数组的长度
4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用
function函数
5)click(function)
6)dblclick(function)
... ...
7)父.append(子)，子元素位于父元素之后，但依然是父子关系
8)父.prepend(子)，子元素位于父元素之前，但依然是父子关系
9)text()：取得标签的内容，优先考虑html()方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>

	<body>
		<hr />
		<div align="center">
			<input type="checkbox" value="篮球" />篮球<br />
			<hr />
			<input type="checkbox" value="排球" />排球<br />
			<hr />
			<input type="checkbox" value="羽毛球" />羽毛球<br />
			<hr />
			<input type="checkbox" value="乒乓球" />乒乓球<br />
			<hr />
			<input type="button" value="选中的个数"><br />
			<hr />
			<input type="button" value="依次选中的value" /><br />
			<hr />
			<ul>
				<li>no.1</li>
				<li>no.2</li>
				<li>no.3</li>
			</ul>
			<hr />
			<div>
				这是子元素，要插到父元素中
			</div>
			<hr />
			<div align="center">
			<select style="width: 60px" multiple size="10" id="leftID">
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
				<option>item 1</option>
			</select>
			<div style="position:absolute;left: 100px;top: 60px">
				<input type="button" value="批量右移" id="rightMoveID" />
			</div>
			<div style="position:absolute;left: 100px;top: 90px">
				<input type="button" value="全部右移" id="rightMoveAllID" />
			</div>
			<div style="position:absolute;left: 220px;top: 20px">
				<select multiple size="10" style="width: 60px;" id="rightID">
				</select>
			</div>
			</div>
			<script type="text/javascript">
				//定位"选中的个数"按钮，同时添加单击事件
				$("input[value='选中的个数']").click(function() {
					alert($(":checkbox:checked").size());
				});
				//定位"依次选中的value"按钮，同时添加单击事件
				$("input[value='依次选中的value']").dblclick(function() {
					$(":checkbox:checked").each(function() {
						alert($(this).val());
					})
				});
				//
				//定位ul父元素
				var $ul = $("ul");
				//定位div子元素
				//var $div = $("div");
				//子元素添加到父元素中，形成父子关系、
				$ul.append( & div);
				//双击左移
				$("#leftID").dblclick(function()
				{
					var $option=$("select option:selected");
					$("#rightID").append($option);
					
				});
				
				
				//批量右移
				$("#rightMoveID").click(function()
				{
					var $option=$("select option:selected");
					$("#rightID").append($option);
				});
				
				//全部右移
				$("#rightMoveAllID").click(function()
				{
					 
					$("#rightID").append($("select option"));
				});
			</script>

	</body>

</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 案例（下拉选择框右移）

* jQuery中DOM常用方法或属性 1)val()：取得标签中value属性的值 2)html()：取得标签内的内容 3)size()或length：取得数组的长度 4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用 function函数 5)click(fu
复制链接

扫一扫

专栏目录