学步园

 <!--************************************* 实例代码开始 *************************************--><mce: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 {} fieldset{ width:500px; margin:10px; } --></mce:style><style type="text/css" mce_bogus="1"> .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 {} fieldset{ width:500px; margin:10px; } </style> <mce: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 obj = document.getElementById('toBox[]'); for(var no=0;no<obj.options.length;no++){ obj.options[no].selected = true; } } // --></mce:script><form method="post" action="" onsubmit="selectItem()"><select multiple name="fromBox" id="fromBox"> <option value="3">中国</option> <option value="4">美国</option> <option value="6">英国</option> <option value="1">法国</option> <option value="5">俄罗斯</option> <option value="2">意大利</option></select><select multiple name="toBox[]" id="toBox"> <option value="12">韩国</option> <option value="13">印度</option> <option value="11">巴西</option></select></form><mce:script type="text/javascript"><!-- createMovableOptions("fromBox","toBox",500,300,'可选国家','已选中的国家'); // --></mce:script><p>你可以通过点击操作按钮或者直接双击移动选项。</p>

配置方法：

（1）用类似下面的代码创建两个多选列表

HTML:

 
<select multiple name="fromBox" id="fromBox">
<option value="3">Finland</option>
<option value="4">France</option>
<option value="6">Mexico</option>
<option value="1">Norway</option>
<option value="5">Spain</option>
<option value="2">United Kingdom</option>
</select>
<select multiple name="toBox[]" id="topBox">
<option value="12">Canada</option>
<option value="13">Germany</option>
<option value="11">United States</option>
</select>
 

（2）用下面的javascript代码初始化设置：

Javascript:

 
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
 

参数说明如下：

      "fromBox" - 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)

      "toBox" - 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)

      500 - 控件的总宽度

      300 - 控件的总高度

      "Available countries" - 第一个多选列表的显示名称

      "Selected countries" - 第二个多选列表的显示名称

提交表单的方法：

当提交表单时，我们希望只有选中的选项值被提交，所以需要一些javascript代码进行一些小的处理。

先在form标签中加入提交事件的处理：

Code:

再加一段javascript代码：

Javascript:

 
function selectItem()
{
var obj = document.getElementById('toBox[]');
for(var no=0;no<obj.options.length;no++){
obj.options[no].selected = true;
}
}