<%@ 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>
</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" onclick="return selectItem();"/>
</form>
<script type="text/javascript">
createMovableOptions("toBox","fromBox",500,300,'已选组成员','可选组成员');
</script>
</body>
</html>
分享到：
相关推荐
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
本资源是用js与html控制的代码，用来实现列表框数据可以多选
多选列表的demo多选列表的demo
extjs中的多选列表,extjs中没有实现多选列表。这是别人作的封装。我找到的。
本程序在网页中设计了多选列表，代码简单、实用，很适合初学者。
可自定义单选、多选类型 可自定义listview样式 可记忆多选项 监听了listview的 OnItemClickListener（可在其中设置多选项数量的限制） 监听了 PopupWindow 的OnPopDismissListener 弹出框右上角突出圆形关闭按钮 可...
自己编写的下拉多选列表。满足多选的需求。java工程压缩包。直接可以运行
实现多选列表框的 添加,移除,全部移除,方便多个选项的同时操作.
C#使用多选列表框控件
18. android dialog —— 多选列表对话框 http://blog.csdn.net/jamesliulyc/archive/2011/04/24/6359628.aspx
jquery 多选列表框 左边选到右边，右边也可以到左边。
Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格
CheckBox实现多选列表，并实现全选、反选功能
jquery按关键词多选列表框选项
本文以包含两个列表框的对话框为例，实现了对话框常用的功能。左边的“待选的历史人物”列表框包含历史人物的名字，当选中人名并单击“添加”按钮，则名字会被添加...且列表框中的选项可以实现多选和多个选项同时操作。
IOS应用源码之多选列表组件KNMultiItemSelector .rar
多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
一个不错的 Form 多选列表控件效果 - option, multiple, select, form,.files.rar
动态生成多选列表的组件封装，数据格式[{'value': '1', 'name': '选项1'},{'value': '2', 'name': '选项2(禁用)', 'disabled': true}, {'value': '3', 'name': '选项3'}]
将多选列表变成带有复选框的美观且易于使用的列表。 该插件只是本机选择列表元素的替代接口。 当您检查插件中的选项时，将在本机列表中选择该值。 这样一来，该值可以以一种形式提交，也可以通过常规的POST / GET和...