<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://www.internetke.com/jsEffects/2015011202/js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.select-body{
text-align: center;
width: 60%;
margin: 0 auto;
}
.header{
text-align: center;
}
.select-left,.select-right{
width:150px;
min-height:200px;
}
.btn-bar input{
width:50px;
}
</style>
</head>
<body>
<div class="header">
<h2>select左右选择组件</h2>
</div>
<div class="row select-body">
<div class="span2">
<select multiple="multiple" id="select1" class="select-left">
<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="科e互联">科e互联</option>
</select>
</div>
<div class="span2">
<div class="btn-bar">
<p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"></span></p>
<p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"></span></p>
<p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"></span></p>
<p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"></span></p>
</div>
</div>
<div class="span2">
<select multiple="multiple" id="select2" class="select-right">
</select>
</div>
</div>
<script type="text/javascript">
$("#add").bind("click",function(){
if(!$("#select1 option").is(":selected"))
{
alert("选择项为空");
}
$("#select1 option:selected").appendTo("#select2");
});
$("#remove").bind("click",function(){
if(!$("#select2 option").is(":selected"))
{
alert("选择项为空");
}
$("#select2 option:selected").appendTo("#select1");
});
$("#add_all").bind("click",function(){
$("#select1 option").appendTo("#select2");
});
$("#remove_all").bind("click",function(){
$("#select2 option").appendTo("#select1");
});
$("#select1").bind("dblclick",function(){
$("#select1 option:selected").appendTo("#select2");
})
$("#select2").bind("dblclick",function(){
$("#select2 option:selected").appendTo("#select1");
})
</script>
</body>
</html>
select左右选择组件
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 在开发过程中,某些功能需要重复使用,利用React中的props来传递参数,通过参数来控制子组件的属性。 使用此页...
- 读书虽好,却教不会你行动的能力2015-05-27 360doc个人图书馆点击上面↗-360doc个人图书馆-进行...