多选数据项代码免费素材下载 JavaScript完成两个多选框的挪动数据项并主动排序性能

资源魔 2021-06-17 15:15:32 57 0

本剧本完成了正在两个多选框内挪动数据项的性能。同时剧本还能够对多选框内的数据项进行主动排序，点提交按钮，零碎只提交选中的名目。并且本剧本的挪用十分简略，只要要简略的几行代码便可
正在网页<head>区增加如下代码
[code]
<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
Download from sharejs.com

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;
var arrayOfItemsToSelect = new Array();

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 sortAllElement(boxRef)
{
var tmpTextArray2 = new Array();
for(var no=0;no<boxRef.options.length;no++){
tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);
}
tmpTextArray2.sort();
for(var no=0;no<tmpTextArray2.length;no++){
var items = tmpTextArray2[no].split('___');
boxRef.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;
sortAllElement(tmpToBox);

}

/* This function highlights options in the "to-boxes". It is needed if the values should be remembered after
submit. Call this function onsubmit for your form */
function multipleSelectOnSubmit()
{
for(var no=0;no<arrayOfItemsToSelect.length;no++){
var obj = arrayOfItemsToSelect[no];
for(var no2=0;no2<obj.options.length;no2++){
obj.options[no2].selected = true;
}
}

}

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

arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;

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++;

}
</script>
[/code]
正在网页<body>区增加如下代码
[code]
<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">
<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="toBox">
<option value="12">Canada</option>
<option value="13">Germany</option>
<option value="11">United States</option>
</select>
</form>
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
[/code]
顺序挪用阐明：
起首相似上面的代码创立两个多选框
[code]
<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>
[/code]
而后挪用一个Javascript函数进行初始化
[code]
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
[/code]
该函数的各个参数阐明以下：
"fromBox" - 第一个多选框的ID(<select multiple name="fromBox" id="fromBox">)
"toBox" - 第二个多选框的ID(<select multiple name="toBox[]" id="toBox">)
500 - 整个操作界面的宽度
300 - 整个操作界面的高度
"Available countries" - 第一个多选框上方的文本
"Selected countries" - 第二个多选框上方的文本
提交表单
当你点击提交按钮时只提交被选中的名目. 要完成这个性能能够为表单增加一个OnSubmit事情.以下:
[code]
<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">
[/code]

标签： css3鼠标悬停特效页脚移动数据

本文地址： http://www.ziyuanmo.com/sczy/26208.html