Click here to Skip to main content
15,908,015 members
Search within:


Select items from left column to right & vice versa
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

HTML
<!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>
Posted
Add a Solution
Comments
LesegoMotlhamme 13-Mar-13 5:46am    
Nb* the script was not placed in the head, the p style declared is invalid...copy and paste into notepad and change appropriately. Thank you
sri senthil kumar 13-Mar-13 9:22am    
No issue in placing the script in body and it is a good practice to keep the scripts just before the closure of body tag as suggested by some experts. What is the problem your facing in the above code?
LesegoMotlhamme 13-Mar-13 12:20pm    
Firefox spits out a couple of errors 1.the function moveItem is undefined. 2. Cse validator says language should be "en: and meta declared should not contain an ";"...If I could just have the list on the right already there(But hidden) and call an item when it is selected from the left column.

1 solution

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
<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>
 
Share this answer
 
Posted
Updated 14-Mar-13 0:41am
v3
Comments
LesegoMotlhamme 14-Mar-13 12:29pm    
Thanx... I will get into it tonight. I will definately be in touch with sum feedback. One.
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Change on to off and vice versa
send data from vb.net to php and vice versa
combo box writes vice versa
Conversion of byte[] to string and vice versa not working
asynchronous networkstream to filestream (vice versa)
Howto display an ASP.net datagrid rows as columns and vice versa?
Php select item from dropdown
Conversion and vice versa
Using js to highlight a item using key codes. I want to use the enter key and left and right arrows
Domain object to ViewModel & vice versa using Automapper

Advertise
Privacy
Cookies
Terms of Use
Last Updated 14 Mar 2013
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-05-29:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900