站长中国
当前位置：站长中国 >> 网页特效 >> 表单操作 >> 内容
精彩推荐
分类最新特效
分类热点特效
   
用按钮选择左右框架内的内容，使用方便简单，酷
日期：2005-07-06   人气：   【字体：大 中 小】【收藏此文】

<!-- 网页特效代码由[站长中国:http://www.zzChina.net]提供！ -->
<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Compare two options within a list by VALUES

function compareOptionValues(a, b)

{

// Radix 10: for numeric values

// Radix 36: for alphanumeric values

var sA = parseInt( a.value, 36 );

var sB = parseInt( b.value, 36 );

return sA - sB;

}



// Compare two options within a list by TEXT

function compareOptionText(a, b)

{

// Radix 10: for numeric values

// Radix 36: for alphanumeric values

var sA = parseInt( a.text, 36 );

var sB = parseInt( b.text, 36 );

return sA - sB;

}



// Dual list move function

function moveDualList( srcList, destList, moveAll )

{

// Do nothing if nothing is selected

if ( ( srcList.selectedIndex == -1 ) && ( moveAll == false ) )

{

return;

}



newDestList = new Array( destList.options.length );



var len = 0;



for( len = 0; len < destList.options.length; len++ )

{

if ( destList.options[ len ] != null )

{

newDestList[ len ] = new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

}

}



for( var i = 0; i < srcList.options.length; i++ )

{

if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

{

// Statements to perform if option is selected



// Incorporate into new list

newDestList[ len ] = new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

len++;

}

}



// Sort out the new destination list

newDestList.sort( compareOptionValues ); // BY VALUES

//newDestList.sort( compareOptionText ); // BY TEXT



// Populate the destination with the items from the new array

for ( var j = 0; j < newDestList.length; j++ )

{

if ( newDestList[ j ] != null )

{

destList.options[ j ] = newDestList[ j ];

}

}



// Erase source list selected elements

for( var i = srcList.options.length - 1; i >= 0; i-- )

{

if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

{

// Erase Source

//srcList.options[i].value = "";

//srcList.options[i].text = "";

srcList.options[i] = null;

}

}



} // End of moveDualList()

// End -->

</script>
<form ACTION="" METHOD="POST" name="myForm">

<table border="0">

<tr>

<td>

<!-- Multiple Select List with 20 rows size and 70 pixels wide -->

<!-- Using for SPACING and alignment -->

<select multiple size="20" style="width:70" name="listLeft">

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

<option value="A" > A </option>

<option value="B" > B </option>

<option value="F" > F </option>

<option value="X" > X </option>

</select>

</td>

<td><NOBR>

<input type="button" style="width:90" onclick="moveDualList( this.form.listLeft, this.form.listRight, false )"

name="Add >>" value="Add >>"> <BR>



<NOBR>

<input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft, false )"

name="Add <<" value="Add <<"> <BR>



<NOBR>

<input type="button" style="width:90" onclick="moveDualList( this.form.listLeft, this.form.listRight, true )"

name="Add All >>" value="Add All >>"> <BR>



<NOBR>

<input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft, true )"

name="Add All <<" value="Add All <<"> <BR>

</NOBR>

</td>

<td>

<select multiple size="20" style="width:70" name="listRight">

<option value="01"> 1 </option>

<option value="02"> 2 </option>

<option value="03"> 3 </option>

<option value="04"> 4 </option>

<option value="05"> 5 </option>

<option value="D" > D </option>

<option value="G" > G </option>

<option value="K" > K </option>

<option value="Z" > Z </option>

<option value="55"> 55 </option>

</select>

</td>

</tr>

</table>

</form>