界面上的左右俩个listbox
<td width="100%" style="text-align: left; padding-left: 10px;">
<table>
<tr>
<td>
板块列表
<br>
<select size="4" name="listLeft" id="listLeft" class="normal"
title="双击可实现右移">
</select>
</td>
<td>
<div style="width: 40px; float: left; padding-top: 10px;">
<input type="button" id="btnRight"
value=" > " />
<br>
<input type="button" id="btnRightAll"
value=" >> " />
<br>
<input type="button" id="btnLeft"
value=" < " />
<br>
<input type="button" id="btnLeftAll"
value=" << " />
</div>
</td>
<td>
关联板块
<br>
<select size="4" name="listRight" id="listRight" class="normal"
title="双击可实现左移">
</select>
</td>
</tr>
</table>
</td>
相关操作
<script type="text/javascript">
//初始化数据,可以从后台取得对应的数据
var initJson ="{ "datalist":
[
{ "data": "jQuery", "text": "jQuery" },
{ "data": "Asp.net", "text": "Asp.net" },
{ "data": "internet", "text": "internet" },
{ "data": "Sql", "text": "Sql" }
]
};"//bind data
var vlist = "";
//遍历json数据
jQuery.each(initJson.datalist, function(i, n) {
vlist += "<option value=" + n.data + ">" + n.text + "</option>";
});
//绑定数据到listLeft
$("#listLeft").append(vlist);
对单条数据进行左右移动
//right move
$("#btnRight").click(function() {
moveright(false);
});
//left move
$("#btnLeft").click(function() {
moveleft(false);
});
//right move all
$("#btnRightAll").click(function() {
moveright(true);
});
//left move all
$("#btnLeftAll").click(function() {
moveleft(true);
});
//double click to move left
$("#listLeft").dblclick(function() {
moveright(false);
});
//double click to move right
$("#listRight").dblclick(function() {
moveleft(false);
});
/对所有的数据进行移动
function moveright(all){
//数据option选中的数据集合赋值给变量vSelect
var vSelect ;
if(all)
vSelect = $("#listLeft option");
else
vSelect = $("#listLeft option:selected");
//克隆数据添加到listRight中
vSelect.clone().appendTo("#listRight");
//同时移除listRight中的option
vSelect.remove();
}
function moveleft(all){
var vSelect ;
if(all)
vSelect = $("#listRight option");
else
vSelect = $("#listRight option:selected");
vSelect.clone().appendTo("#listLeft");
vSelect.remove();
}
/获得选择的值
function getValues(){
var selOps = $("#listRight option");
var getValue = '';
jQuery.each(selOps, function(i, n) {
getValue += n.value +",";
});
$("#getRelSessions").val(getValue);
}