从左到右选择项目&反之亦然 [英] Select items from left column to right & vice versa
本文介绍了从左到右选择项目&反之亦然的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好！
如果有任何javascript程序员可以帮助我使这个脚本工作，我将不胜感激并感到谦卑。这是一个校队项目。我真的需要总和指导。提前谢谢。
亲切的问候。
Hi guys!
I will be grateful and humbled if any javascript programmers could help me make this script work. It''s a varsity project. I really need sum guidance. Thank you in advance.
Kind regards.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Move Menu</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<!----------------------internal style sheet---------------------->
<style type="text/css">
div#cover {
width: 600px;
height: 420px;
background: grey;
margin-left:350px;
border: 0.9px solid #cfa;
box-shadow: .1em .3em .8em ;
}
p{
font-family: arial;
}
h1 h2 {
font-family: arial, helvetica;
padding: 0px 0px 0px 0px;
color: #1ee;
}
table {
border: 1px solid grey;
width: 90%;
height: 95%;
background: #fff;
border: none;
margin-top: 10px;
box-shadow: .1em .3em .8em ;
border-collapse: collapse;
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
border-bottom-left-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
table:hover{
background: black;
}
th{
padding: 0px 0px 0px 0px;
background: #a9b;
margin: 1px 1px 1px 1px;
font-family: cambria, helvetica;
}
select {
margin: 0px 0px 0px 5px;
width: 95%;
height: auto;
padding: 0px 0px 0px 0px;
}
input {
padding: 0px 0px 0px 0px;
margin-left: 35px ;
}
</style>
</head>
<!----------------------content---------------------------------->
<body>
<!----------------------internal script--------------------------->
<script type="text/javascript">
/* <![CDATA[ */
//----------------------function to move selected item to the right-----------//
function moveItem(selectFrom, selectTo) {
var selectLength = selectFrom.length;
var textSelected = new Array();
var valueSelected = new Array();
var count = 0;
var i;
for(i = selectLength - 1; i >= 0; i--) // Locate selected options backwards and remove them from the left column
{
if(selectFrom.options[i].selected)
{
selectedText[count] = selectFrom.options[i].text;
valueSelected[count] = selectFrom.options[i].value;
deleteOption(selectFrom, i);
count++;
}
for(i = count - 1; i >= 0; i--) // Add selected values & text to right columns in reverse to maintain the original postion.
{
addOption(selectTo, textSelected[i], valueSelected[i]);
}
}
//Function to assign values and text to a new object to be displayed on the right
function addOption(sElecT, tExT, vAluE)
{
var newOne = new Option(tExT, vAluE);
var selectLength = sElecT.length;
sElecT.options[selectLength] = newOne;
}
//Function to remove values and text from the right column
function delOption(sElecT, iNdeX)
{
var selectLength = sElecT.length;
if ( selectLength > 0)
{
sElecT.options[iNdeX] = null;
}
}
}
/* */
</script>
<!------------------------column wrapper--------------------------->
<div id="cover" align="center">
<h1>Here you can select your items</h1><h2>You can enter as many as the list allows.</h2> <!---Display h1 and h2--->
<!--------------------begin table----->
<table border="1">
<!----------------table head------>
<thead>
<tr>
<th/>Select Here</th>
<th>Click</th>
<th>Selected Items</th>
</tr>
</thead>
<!--------------begin left column with items to select-->
<tr><td>
<!------------------------begin form------------------------------->
<form enctype="application/x-www-form-urlencoded">
<select name="selectFrom" multiple="multiple" size="10">
<option value="all" selected="selected">All</option>
<option value="gNotebook">Google Notebook</option>
<option value="meNotebook">Meccer Notebook</option>
<option value="dellNotebook">Dell Notebook</option>
<option value="galaxy">Galaxy pad</option>
</select>
</td>
<!-------------begin middle row with arrow buttons------>
<td>
<input type="button" value=">>" önclick="moveItem(this.form.LeftCol, this.form.RightCol);" /><br />
<input type="button" value="<<" önclick="moveItems(this.form.RightCol, this.form.LeftCol);" />
</td>
<!------------begin right column for selected items----->
<td>
<select name="selectTo" multiple="multiple" size="10">
</select>
</td></tr>
</table>
</form>
</div>
</body>
</html>
推荐答案
LesegoMotlhamm，
检查以下代码是否有效，希望它能解决您的需求。如果您有任何查询或任何其他增强功能，请回复。
LesegoMotlhamm,
Check this below code it works, hope it solves your requirment. Reply if you have any query or any more enhancement to it.
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>From</td>
<td></td>
<td>To</td>
</tr>
<tr>
<td> <select id="selectFrom" multiple="multiple" size="10">
<option value="all" selected="selected">All</option>
<option value="gNotebook">Google Notebook</option>
<option value="meNotebook">Meccer Notebook</option>
<option value="dellNotebook">Dell Notebook</option>
<option value="galaxy">Galaxy pad</option>
</select></td>
<td>
<a href="#" onclick="listboxCopy('selectFrom', 'selectTo');" title="Add to selected columns">from-to</a><br />
<a href="#" onclick="listboxCopy('selectTo', 'selectFrom');" title="Add to selected columns">To-from</a>
</td>
<td><select id="selectTo" multiple="multiple" size="10">
<option value="meNotebook">Meccer Notebook</option>
<option value="dellNotebook">Dell Notebook</option>
<option value="galaxy">Galaxy pad</option>
</select></td>
</tr>
</table>
<script type="text/javascript">
//Function to move items from listbox to listbox
function listboxCopy(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for (var count = 0; count < src.options.length; count++) {
var option = src.options[count];
if (option.selected == true) {
addItemToListbox(dest, option.value, option.text);
}
}
listBoxRemove(sourceID);
}
//Functin to add item to listbox
function addItemToListbox(selectObj, optionValue, optionText) {
var newOption = document.createElement("option");
newOption.value = optionValue;
newOption.text = optionText;
try {
selectObj.add(newOption, null); //Standard
}
catch (error) {
selectObj.add(newOption); // IE only
}
}
//Functino to remove an item from listbox
function removeItemFromListBox(selectObj, index) {
try {
selectObj.remove(index, null); //Standard
}
catch (error) {
selectObj.remove(index); // IE only
}
}
//Function to remove items from listbox
function listBoxRemove(destID) {
var dest = document.getElementById(destID);
for (var count = 0; count < dest.options.length; count++) {
var option = dest.options[count];
if (option.selected == true) {
removeItemFromListBox(dest, count);
count--;
}
}
}
</script>
</body>
</html>这篇关于从左到右选择项目&反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
