您的位置：首页 > Web前端 > JQuery

jquery完成列表中数据选择，以及进行所选数据的再选择

2016-09-02 20:39 417 查看

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Jquery实现角色左右选择特效</title>

<script src="jquery-1.9.1.js"></script>

<style type="text/css">

#one{width:200px; height:180px; float:left}

#two{width:50px; height:180px; float:left}

#three{width:200px; height:180px; float:left}

.btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}

</style>

<script type="text/javascript">

//下拉框交换JQuery

$(function(){

//移到右边

$('#add').click(function() {

//获取选中的选项，删除并追加给对方

$('#select1 option:selected').appendTo('#select2');
selectReload();

});

//移到左边

$('#remove').click(function() {

$('#select2 option:selected').appendTo('#select1');
selectReload();

});

//全部移到右边

$('#add_all').click(function() {

//获取全部的选项,删除并追加给对方

$('#select1 option').appendTo('#select2');
selectReload();

});

//全部移到左边

$('#remove_all').click(function() {

$('#select2 option').appendTo('#select1');
selectReload();

});

//双击选项

$('#select1').dblclick(function(){ //绑定双击事件

//获取全部的选项,删除并追加给对方

$("option:selected",this).appendTo('#select2'); //追加给对方

});

//双击选项

$('#select2').dblclick(function(){

$("option:selected",this).appendTo('#select1');

});

//动态变换第三个选择框的值
$('#select1').dblclick(function(){
selectReload();
});

//动态变换第三个选择框的值
$('#select2').dblclick(function(){
selectReload();
});

//select3初始化
function selectReload(){
$('#select3').empty();
var obj = document.getElementById('select2');
var options = obj.options;
var opt = new Array();
for(var i=0,len=options.length;i<len;i++){
opt = options[i];
var option=new Option() ;
option.innerHTML = opt.text;
option.value = opt.value;
$('#select3').append(option);
}
}

});

</script>

</head>

<body>

<br />

<br />

<table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab">

<tr>

<th> </th>

<td><div>

<div>

<select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; ">

<option value="超级管理员">超级管理员</option>

<option value="普通管理员">普通管理员</option>

<option value="信息发布员">信息发布员</option>

<option value="财务管理员">财务管理员</option>

<option value="产品管理员">产品管理员</option>

<option value="资源管理员">资源管理员</option>

<option value="管理员">管理员</option>

</select>

</div>

<div style="float:left"> <span id="add">

<input type="button" class="btn" value=">"/>

</span><br />

<span id="add_all">

<input type="button" class="btn" value=">>"/>

</span> <br />

<span id="remove">

<input type="button" class="btn" value="<"/>

</span><br />

<span id="remove_all">

<input type="button" class="btn" value="<<"/>

</span> </div>

<div>

<select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;">

</select>

</div>
<div>
请选择：
<select id="select3">
<option>请选择</option>
</select>
</div>

</div></td>

</tr>

</table>

</body>

</html>

喜欢的朋友可以扫描我的个人公众号，有好东西可以一起分享。免费获取各种学习视频、源码、PPT资料

也可以微信搜索公众号：Java程序员那些事

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航