双向下拉框互相选中
实现思路如下:
1.点击弹出选择框，进行需要数据的加载。放发哦option里面去进行显示。
2.把选中的数据放到一个input的隐藏域去存放。
3.当再次点击弹出选择框的时候，进行显示数据的过滤,把存放在隐藏域中的选中数据放到已选中的下拉框列表中去显示,在跟所有要显示的数据进行比对把选中的remove掉不需要显示在下拉列表框里面。
4.代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="${path.webRoot}resources/plupload/jquery-1-9-1.js"></script>
<script src="${path.webRoot}resources/js/json2.js"></script>
<style type="text/css">
#out{display:none;overflow: hidden;width: 525px;height: 200px; border: 1px solid #ccc;position: absolute; top: 30%;left: 50%;margin-left: -25%;z-index: 10000; background: #FFFFFF; overflow-y: auto;}
#out select { width:200px; height:137px; paddling:5px;}
#Layer5 span {font-size:12px; display:block; width:70px; background:#eee; cursor:pointer; border:1px solid #ccc; paddling:5px 0; margin:5px 0;}
</style>
</head>
<body>
<form id="form1" action="${pageContext.request.contextPath}/bmtest/testSave.do" method="post">
<input type="button" value="报名" id="bm" onclick="getSelectUser('baoming','001034');"/>
<!-- 获取处室的ID -->
<input type="hidden" id="pid" name="pid" value="001034"/>
<!-- 这条文的ID -->
<input type="hidden" id="did" name="did" value='${apply.aId}'/>
<!-- 用来传输数据到后台保存-->
<input type="hidden" id="ybry" name="ybry" value="" size="240"/>
<!-- 用来下拉框列表的过滤 和显示在已报名下拉框中 -->
<input type="hidden" id="sybry" name="sybry" value="${ybry}" size="100"/>
<div style="width: 70%;height: 150px;border:1px solid #000;" id="showStr"></div>
<!-- 人员选择弹出框 -->
<div id="Layer5" name="Layer5" style='display:none; z-index: 999;padding-left: 200px;' bgcolor="e4f8fe" >
<table width="650" border="0" cellspacing="0" cellpadding="0"
bgcolor="e4f8fe" style="border: #4898ac 1px solid;">
<tr>
<td colspan="3" height="25" bgcolor="#4898ac"> </td>
</tr>
<tr><td><br>
<table width="630" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td width="260" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><b>未报名人员：</b></td>
</tr>
<tr>
<td width="100%">
<select name="selsource" size="18"
multiple class="form" style="width: 100%" id="select">
</select></td>
</tr>
</table>
</td>
<td style="padding-left: 20px;">
<span id="add">选中右移>></span> <span id="add_all">全部右移>></span>
<span id="remove"><<选中左移</span><span id="remove_all"><<全部左移</span>
</td>
<td width="260" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><b>已报名人员：</b></td>
</tr>
<tr>
<td width="100%"><select name="Seladd" size="18"
multiple class="form" style="width: 100%"
id="get">
</select></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="630" border="0" cellspacing="0" cellpadding="0"
align="center" >
<tr>
<td style="padding-left: 270px;">
<input type="button" onclick="javascript:btnGetUsers();" value="确定"/>
<input type="button" onclick="javascript:btnCloseUser();" value="关闭" />
</td>
</tr>
</table></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
iniSelect();
showJson();
});
//后台回来进行显示这个会议通知的报名人员
function showJson(){
var did = $("#did").val();
$.ajax({
url : "${path.projectPath}/bmtest/checkTest.do?did="+did,
type : "post",
dataType : "JSON",
success : function (data){
//显示报名人员到DIV里面
$("#showStr").html("<b>"+data.dept+"</b>"+":"+data.name);
}
});
}
var selectUserObj = null;
/**人员架构选择 */
//点击按钮，弹出框
function getSelectUser(type,id) {
var xx = $("#sybry").val().split(",");
//alert(xx.length);
if($.trim($("#sybry").val())!=""){
initBaoMing(xx);
}
if($.trim(type)!="" && $.trim(id)!=""){
var this_element=$("#get");
if(!$.isEmptyObject(this_element)){
$.ajax({
url : "${path.projectPath}/leaderInfo/getSelectUserToJson.do?type="+type+"&cid="+id,
type : "post",
dataType : "JSON",
success : function (data){
var result=data[type];
initLeader(result);
//分别获取未报名下拉框和已报名人员
var obj = document.getElementById('select');
var ybry = document.getElementById("sybry").value.split(",");
//alert("已报人员的数量：===="+ybry.length);
for(var i=0 ;i<obj.length;i++){
for(var j=0;j<ybry.length;j++){
if(obj.options[i].value==ybry[j]){
obj.options[i].remove();
}
}
}
}
});
}
}
//最后吧这个列表显示出来
$("#Layer5").css("display","block");
}
function selectValue(list,s){/*已选*/
var options = $("#select option");
for(var i=0;i<options.length;i++){
for(var j =0;j<list.length;j++){
if(options[i].value==list[j]){
options[i].selected="true";
}
}
}
if(s==1){
$("#select option:selected").appendTo("#get"+s);
}else{
$("#select option:selected").appendTo("#get");
}
}
function initLeader(list,bmList){/*遍历所有 未报名人员列表*/
var item = "";
for(var i =0 ;i<list.length;i++){
item+="<option value='"+list[i].fullName+"'>"+list[i].fullName+"</option>";
}
$("#select").html(item);
}
function initBaoMing(list){/*遍历所有 已报名人员列表*/
//alert("报名人员数量："+list.length);
var item = "";
for(var i =0 ;i<list.length;i++){
//alert(list[i]);
item+="<option value='"+list[i]+"'>"+list[i]+"</option>";
}
// alert(item);
$("#get").html(item);
}
//确定选择，并存到input标签中
function btnGetUsers(){
var all = "";
$("#get option").each(function() {
all += $(this).text()+",";
});
$("#ybry").val(all);
btnCloseUser();
$("#form1").submit();
}
//关闭弹出框
function btnCloseUser(){
$("#Layer5").css("display","none");
$("#Layer5 select").find("option").remove();
}
//加载选择功能
function iniSelect() {
$("#add").click(function () {
$("#select option:selected").appendTo("#get");
});
$("#add_all").click(function () {
$("#select option").appendTo("#get");
});
$("#remove").click(function () {
$("#get option:selected").appendTo("#select");
});
$("#remove_all").click(function () {
$("#get option").appendTo("#select");
});
$("#select").dblclick(function () {
$("#select option:selected").appendTo("#get");
});
$("#get").dblclick(function () {
$("#get option:selected").appendTo("#select");
});
}
</script>
</body>
</html>
