<%@ 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>
分享到：
相关推荐
在IT领域，多选列表（Multiple Select List）是一种常见的用户界面元素，用于让用户从一系列选项中选择多个项目。这种交互方式广泛应用于各种软件、网站和应用程序中，为用户提供了一种高效的方式来选择他们感兴趣的...
下拉多选列表是用户界面设计中常见的交互元素，它允许用户从一组预设选项中选择多个项目。在Java编程中实现这样的功能，通常会涉及到 Swing 或 JavaFX 这样的图形用户界面（GUI）库。这里，我们有一个名为"下拉多选...
本资源是用js与html控制的代码，用来实现列表框数据可以多选
在IT领域，尤其是在软件开发中，处理用户界面（UI）时，多选列表框（Multiple Select Boxes）是一种常见的组件，允许用户从多个选项中选择一个或多个值。本篇文章将深入探讨多选列表值的移动和获取，以及相关源码和...
在EXTJS这个强大的JavaScript框架中，虽然原生并未直接提供多选列表（Multi Select List）组件，但开发者可以通过自定义组件或者利用EXTJS现有的组件进行组合来实现这一功能。EXTJS是一个用于构建富客户端Web应用的...
本话题聚焦于“jQuery 多选列表框”，这是一种允许用户在两个列表之间双向选择项的交互控件，通常用于数据筛选或选项分配。 首先，我们来看`jquery.multiselect2side`这个压缩包文件，它很可能包含了实现这种功能的...
在C#编程中，多选列表框控件（ListBox）是一种常见的用户界面元素，它允许用户从一组选项中选择一个或多个项目。本教程将深入探讨如何在C#应用程序中有效地利用多选列表框控件，提高用户体验并实现更丰富的交互功能...
"多选下拉列表"和"复选下拉列表"是常见的组件，用于提供用户在一组选项中进行多个选择的功能。这些组件通常用于数据筛选、配置设置或信息录入等场景。本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. *...
本程序在网页中设计了多选列表，代码简单、实用，很适合初学者。
可自定义单选、多选类型 可自定义listview样式 可记忆多选项 监听了listview的 OnItemClickListener（可在其中设置多选项数量的限制） 监听了 PopupWindow 的OnPopDismissListener 弹出框右上角突出圆形关闭按钮 可...
本教程将深入讲解如何创建一个多选列表对话框（MutiChoice Dialog），让用户能够在多个选项中进行选择。 首先，我们来了解`AlertDialog`的基本结构。`AlertDialog`是Android SDK提供的一个对话框类，它提供了多种...
虽然原生的多选列表控件在功能上满足需求，但在视觉效果和用户体验方面可能不尽如人意。为提升用户体验，开发者通常会使用CSS和JavaScript库（如jQuery UI或Bootstrap）对这些元素进行样式调整。例如，可以添加...
实现多选列表框的 添加,移除,全部移除,方便多个选项的同时操作.
在这个“jquery按关键词多选列表框选项.rar”压缩包中，我们可以推测包含了一个实现基于关键词搜索的多选列表框的jQuery插件或示例。这种功能在网页表单中尤其有用，它允许用户通过输入关键词快速找到并选择多个相关...
本文将深入探讨如何使用CheckBox来创建一个多选列表，并实现全选和反选的功能。这些功能常见于各种应用，如设置菜单、购物车等，使得用户可以方便地进行多项操作。 首先，我们需要一个ListView来展示列表项。...
标题中的“左右移动多选列表控件”是指一种常见的用户界面元素，用于在两个列表之间进行选择和转移项。这种控件通常包含两个并排放置的列表框，一个表示已选择的项目，另一个则显示可选项。用户可以通过点击或拖动...
在多选列表和表格中，我们通常会结合`List`或`DataGrid`组件来实现多选功能。下面我们将详细讨论如何在Flex中实现带有CheckBox的多选列表和表格。 首先，`CheckBoxList`是基于`List`组件的扩展，它为每个列表项添加...
在iOS开发中，多选列表组件是常见的交互元素，它允许用户从多个选项中选择一个或多个项目。本文将深入探讨基于iOS的多选列表组件——`KNMultiItemSelector`，该组件通常用于创建自定义的多选下拉菜单或者筛选器。 `...
本篇文章将深入探讨这一主题，包括复选下拉列表、jQuery多选列表以及多级联动的实现。 首先，我们来看**多选下拉列表**的基本概念。在HTML中，`<select>`标签用于创建下拉列表，通过`multiple`属性可以启用多选功能...
本文以包含两个列表框的对话框为例，实现了对话框常用的功能。左边的“待选的历史人物”列表框包含历史人物的名字，当选中人名并单击“添加”按钮，则名字会被添加...且列表框中的选项可以实现多选和多个选项同时操作。