多选列表。

aiyan3344 · 发表于 2013-1-26 13:05:56

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://jchome.jsprun.com/jch" prefix="jch"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<style type="text/css">

.multipleSelectBoxControl span{ /* Labels above select boxes*/
      font-family:arial;
      font-size:11px;
      font-weight:bold;
}
.multipleSelectBoxControl div select{ /* Select box layout */
      font-family:arial;
      height:100%;
}
.multipleSelectBoxControl input{ /* Small butons */
      width:25px;
}

.multipleSelectBoxControl div{
      float:left;
}

.multipleSelectBoxDiv
</style>
<script type="text/javascript">

/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var fromBoxArray = new Array();
var toBoxArray = new Array();
var selectBoxIndex = 0;

function moveSingleElement()
{
      var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
      var tmpFromBox;
      var tmpToBox;
      if(this.tagName.toLowerCase()=='select'){
         tmpFromBox = this;
         if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
      }else{

         if(this.value.indexOf('>')>=0){
            tmpFromBox = fromBoxArray[selectBoxIndex];
            tmpToBox = toBoxArray[selectBoxIndex];
         }else{
            tmpFromBox = toBoxArray[selectBoxIndex];
            tmpToBox = fromBoxArray[selectBoxIndex];
         }
      }

      for(var no=0;no<tmpFromBox.options.length;no++){
         if(tmpFromBox.options[no].selected){
            tmpFromBox.options[no].selected = false;
            tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);

            for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
                  tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
                  tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
                  tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
            }
            no = no -1;
            tmpFromBox.options.length = tmpFromBox.options.length-1;

         }
      }

      var tmpTextArray = new Array();
      for(var no=0;no<tmpFromBox.options.length;no++){
         tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);
      }
      tmpTextArray.sort();
      var tmpTextArray2 = new Array();
      for(var no=0;no<tmpToBox.options.length;no++){
         tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);
      }
      tmpTextArray2.sort();

      for(var no=0;no<tmpTextArray.length;no++){
         var items = tmpTextArray[no].split('___');
         tmpFromBox.options[no] = new Option(items[0],items[1]);

      }

      for(var no=0;no<tmpTextArray2.length;no++){
         var items = tmpTextArray2[no].split('___');
         tmpToBox.options[no] = new Option(items[0],items[1]);
      }
}

function moveAllElements()
{
      var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
      var tmpFromBox;
      var tmpToBox;
      if(this.value.indexOf('>')>=0){
         tmpFromBox = fromBoxArray[selectBoxIndex];
         tmpToBox = toBoxArray[selectBoxIndex];
      }else{
         tmpFromBox = toBoxArray[selectBoxIndex];
         tmpToBox = fromBoxArray[selectBoxIndex];
      }

      for(var no=0;no<tmpFromBox.options.length;no++){
         tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
      }

      tmpFromBox.options.length=0;

}

function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
{
      fromObj = document.getElementById(fromBox);
      toObj = document.getElementById(toBox);

      fromObj.ondblclick = moveSingleElement;
      toObj.ondblclick = moveSingleElement;

      fromBoxArray.push(fromObj);
      toBoxArray.push(toObj);

      var parentEl = fromObj.parentNode;

      var parentDiv = document.createElement('DIV');
      parentDiv.className='multipleSelectBoxControl';
      parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
      parentDiv.style.width = totalWidth + 'px';
      parentDiv.style.height = totalHeight + 'px';
      parentEl.insertBefore(parentDiv,fromObj);

      var subDiv = document.createElement('DIV');
      subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
      fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

      var label = document.createElement('SPAN');
      label.innerHTML = labelLeft;
      subDiv.appendChild(label);

      subDiv.appendChild(fromObj);
      subDiv.className = 'multipleSelectBoxDiv';
      parentDiv.appendChild(subDiv);

      var buttonDiv = document.createElement('DIV');
      buttonDiv.style.verticalAlign = 'middle';
      buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
      buttonDiv.style.width = '30px';
      buttonDiv.style.textAlign = 'center';
      parentDiv.appendChild(buttonDiv);

      var buttonRight = document.createElement('INPUT');
      buttonRight.type='button';
      buttonRight.value = '>';
      buttonDiv.appendChild(buttonRight);
      buttonRight.onclick = moveSingleElement;

      var buttonAllRight = document.createElement('INPUT');
      buttonAllRight.type='button';
      buttonAllRight.value = '>>';
      buttonAllRight.onclick = moveAllElements;
      buttonDiv.appendChild(buttonAllRight);

      var buttonLeft = document.createElement('INPUT');
      buttonLeft.style.marginTop='10px';
      buttonLeft.type='button';
      buttonLeft.value = '<';
      buttonLeft.onclick = moveSingleElement;
      buttonDiv.appendChild(buttonLeft);

      var buttonAllLeft = document.createElement('INPUT');
      buttonAllLeft.type='button';
      buttonAllLeft.value = '<<';
      buttonAllLeft.onclick = moveAllElements;
      buttonDiv.appendChild(buttonAllLeft);

      var subDiv = document.createElement('DIV');
      subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
      toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

      var label = document.createElement('SPAN');
      label.innerHTML = labelRight;
      subDiv.appendChild(label);

      subDiv.appendChild(toObj);
      parentDiv.appendChild(subDiv);

      toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
      fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';

      selectBoxIndex++;

}
function selectItem()
{
var dtd=document.getElementById("toBox");

if(document.getElementById("groupName").value==""){
alert("分组名称不能为空,请填写");
return false;
}else if(dtd.options.length==0){
alert("组成员不能为空，请选择");
return false;
}else{
var result="";
for(var i =0;i<dtd.options.length;i++){
if(i==dtd.options.length-1){
result+=dtd.options[i].value;//+","+dtd.options[i].text
}else{
result+=dtd.options[i].value+";"//+","+dtd.options[i].text+";";
}
}
document.getElementById("customerName").value=result;
  // alert(dtd.innerHTML);
  // alert(document.getElementById("customerName").value);
      var obj = document.getElementById('toBox[]');
      for(var no=0;no<obj.options.length;no++){
         obj.options[no].selected = true;
      }
      return true;
      }

}
</script>
<title>My JSP 'MyJsp.jsp' starting page</title>
  </head>
  <body>
<form action="saveGroup.action" method="post" id="form1">
<div class="h_status">
<label align="left">
客户列表
</label>

<label align="right">
<a href="findQryCusConBS.action">客户协调</a>
</label>
</div>
<div class="tabs_header">
<ul class="tabs">
<li ${active_getMyCustomerInfo }>
<a href="getMyCustomerInfo.action" ><span>我的客户</span>
</a>
</li>
<li ${active_getAllCustomer }>
<a href="getAllCustomer.action" ><span>全部客户</span>
</a>
</li>
<li ${active_getMyAtzCustomer }>
<a href="getMyAtzCustomer.action" ><span>我关注的客户</span>
</a>
</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</li>

<li${active_SNSSerach}>
<a href="serach.action"><span>全网客户搜索</span>
</a>
</li>
<li${active_initGroup}>
<a href="initGroup.action"><span>新建组</span>
</a>
</li>
</ul>
</div>
<span>(1)输入组名称</span>
</br>
<input type="text" id="groupName" name="groupName"
class="t_input" />
<br />
<span>(2)添加组成员</span>
<select multiple="true" id="toBox">
</select>
<s:select multiple="true" name="aa" list="map" id="fromBox" />
<br/>
<input type="hidden" name="customerName" id="customerName">
<span>(3)
<input type="button" name="submitSerach1" id="submitSerach1" value="完成并提交" class="submit" />
</form>
<script type="text/javascript">
createMovableOptions("toBox","fromBox",500,300,'已选组成员','可选组成员');
</script>
</body>
</html>

		自动登录	找回密码
密码			立即注册