jquery单击实现对象左右移动效果
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#add").click(function() {
var selectedOptions = $("#ids > option:selected");
var idList = $("#idList");
idList.append(selectedOptions);
});
$("#remove").click(function() {
var selectedOptions = $("#idList > option:selected");
var ids = $("#ids");
ids.append(selectedOptions);
});
var idlist=$("#idList");
$("#ids>option").dblclick(function(){
idlist.append($(this));
});
var ids=$("#ids");
$("#idList>option").dblclick(function(){
ids.append($(this));
});
});
</script>
<style type="text/css">
.txt{
border:5px solid pink;
}
</style>
</head>
<body>
<div class="content_group">
<div class="span4">
<label class="control-label">请选择姓名:</label>
<div class="controls">
<select id="idList" multiple="multiple" size="10" style="float: left;width:100px;height:300px">
<option value="1">张三</option>
</select>
<div style="width: 60px;float: left;text-align:center;margin-top:100px;">
<input type="button" id="add" value="<<添加" >
<input type="button" id="remove" value=">>移除" >
</div>
<select id="ids" multiple="multiple" size="10" style="float: left;width:100px;height:300px">
<option value="2">李四</option>
<option value="3">王五</option>
<option value="4">赵六</option>
<option value="5">南开</option>
</select>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
