jquery学习(三)--下拉左右选择菜单

原创 2012年03月21日 19:11:52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右菜单</title>
<script src="../include/jquery-1.7.1.js"></script>
<style>

</style>
<script>
/*简单选择器*/
/*selected:查找所有选中的选项元素*/
/*appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中。
		   使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
*/
$(document).ready(function (){
	$('#btn_right').click(function (){
		$('#a option:selected').appendTo('#b');
		});
	$('#btn_left').click(function (){
		$('#b option:selected').appendTo('#a');
		});
	});

</script>
</head>

<body>
<div id="select1">
<select size="10"  id="a" style="background:#CCC">
<option value="我要过去" >我要过去</option>
<option value="我不要过去" >我不要过去</option> 
</select>

<input type="button" value="》》" id="btn_right">
<input type="button" value="《《" id="btn_left">

<select size="10"  id="b" style="background:#CCC">
<option value="我要过去" >我要过去</option>
<option value="我不要过去" >我不要过去 </option> 
</select>
</div>
</body>
</html>


jQuery之下拉框左右选择

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: class="centent"> select multip...
  • gwpJava
  • gwpJava
  • 2013年12月13日 17:16
  • 776

一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择使用jQuery完成下拉列表左右选择有这样一个需求,在(商品)分类的修改页面中,如下这样一个页面: 有某个分类下的所属的商品信息...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年07月06日 09:39
  • 892

jQuery_review之jQuery实现左右多选内容交换

在HTML中,通过Select设置multiple=“multiple”设置当前的框为多选框,也就意味着可以同时选择多个内容。在我们的系统中经常可以看到左右两侧的选择,甚至在腾讯的应用中,都有很多类似...
  • ziwen00
  • ziwen00
  • 2014年07月25日 22:04
  • 2316

基于jquery封装的颜色下拉选择框

应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用...
  • foren_whb
  • foren_whb
  • 2016年09月23日 17:28
  • 676

JQuery MultiSelect(左右选择框)

demo $(function(){ //选择一项 $("#addOne").click(function(){ $("#from option:selected").clon...
  • wushaoge0129
  • wushaoge0129
  • 2013年11月12日 10:21
  • 1696

jquery实现下拉列表二级联动

function getPositionGrade(){ $("#flag").nextAll().remove();//如果二级有列表,清除下 //下拉列表二级联动内容 var p...
  • LQW_java_home
  • LQW_java_home
  • 2016年12月08日 09:12
  • 2206

jquery带动画的二级下拉列表

带动画 的二级下拉列表 无标题文档 *{padding:0; margin:0;} li{ list-style:none} a{ text-decoration:none;} .nav...
  • daimomo000
  • daimomo000
  • 2016年12月20日 10:38
  • 572

js-案例:下拉列表左右选择分析

效果如图所示: 首先,选中前两项:点击第一个按钮,选中添加到右边,效果如图:然后点击全部添加到右边,效果如图:同样,点击选中添加到左边按钮,效果如图:点击全部添加到左边按钮,效果如图: 完整代码如图所...
  • zhulin0519
  • zhulin0519
  • 2015年11月16日 21:51
  • 1048

下拉框左右选择

* { margin:0; padding:0; } div.centent {    float:left;    text-align: center;    margin: 10px; ...
  • QCIWYY
  • QCIWYY
  • 2016年07月13日 10:13
  • 368

jQuery+ajax实现省市区下拉菜单联动(增强版)实现锁定用户所在地并且可以直接选区

之前做过一个省市区联动的下拉菜单,但是这个功能有一个缺陷,当有一个需求: 1.页面加载的时候锁定用户注册的所在地; 2.可以直接换区,不用等省份发生change时间之后才可以换区(之前版本的功能就...
  • Winter_chen001
  • Winter_chen001
  • 2017年03月30日 13:17
  • 802
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery学习(三)--下拉左右选择菜单
举报原因:
原因补充:

(最多只允许输入30个字)