moving options from one select to another

[Roelf]

Hi,

i did a few searches (browsed through about 1000 results), but i couldn't find it. I am sure it was posted sometime ago.

I need the code to move options from one select to another, with 4 buttons inbetween them, move all, move selected, remove all, remove selected. On top of that, i need code to change the order in the second selectbox, also 4 buttons, move one up, move to top, move one down, move to bottom. Does anyone have (a link to) such code? I dont have the time to code it myself right now :(

Please?

Roelf

[optimism_]

indeed i have. spent ages coding this for something i was working on:


function addoption()
{
var sel=document.form1.allitems.options.selectedIndex
if(document.form1.allitems.options[sel].value!="END_OF_LIST")
{
for(x=0 ; x<no ; x++)
{
if(document.form1.selecteditems.options[x]==null)
{
document.form1.selecteditems.options[x]=new Option(document.form1.allitems.options[sel].text, document.form1.allitems.options[sel].value)
for(y=sel ; y<no-no_of_adds ; y++)
{
if(document.form1.allitems.options[y+1]!=null)
{
document.form1.allitems.options[y].text=document.form1.allitems.options[y+1].text
document.form1.allitems.options[y].value=document.form1.allitems.options[y+1].value
}
else
{
document.form1.allitems.options[y]=null
}
}
no_of_adds++
no_of_rems--
document.form1.allitems.options[no-no_of_adds]=null
x=no
}
}
}
document.form1.selecteditems.options.selectedIndex=0;
}

function removeoption()
{
var sel=document.form1.selecteditems.options.selectedIndex
for(x=0 ; x<no+1 ; x++)
{
if(document.form1.allitems.options[x]==null)
{
document.form1.allitems.options[x]=new Option(document.form1.selecteditems.options[sel].text, document.form1.selecteditems.options[sel].value)
for(y=sel ; y<no-no_of_rems+1 ; y++)
{
if(document.form1.selecteditems.options[y+1]!=null)
{
document.form1.selecteditems.options[y].text=document.form1.selecteditems.options[y+1].text
document.form1.selecteditems.options[y].value=document.form1.selecteditems.options[y+1].text
}
else
{
document.form1.selecteditems.options[y]=null
}
}
no_of_adds--
no_of_rems++
document.form1.selecteditems.options[no-no_of_rems+1]=null
x=no+1
}
}
}


This framework adds (shifts ->) from a seclect called "allitems" or removes (shifts <-) from a list calles "selecteditems" You're onyour own for the up/down functions. The only thing this script requires is an option in each list called "END_OF_LIST" and the vars no_of_adds set to the number of items in allitems (?) and no_of_rems set to the number of items in selecteditems (? these might be backwards)

gd luck

[beetle]

QForms (http://www.pengoworks.com/index.cfm?action=get:qforms) does that, mostly.

http://www.pengoworks.com/qforms/docs/examples/containers.htm

[Roelf]

Hi,

ended up coding ti myself, Qforms was too large for my needs, the solution optimism provided, didn't work for me either, here is what i came up with:


function selectselected (fromSelObj, toSelObj) {
var fromlength = fromSelObj.options.length;
var tolength = toSelObj.options.length;
for (var i = 0; i < fromlength; i++) {
if (fromSelObj.options[i].selected) {
// check if it doesn't already exists in the target
var exists = false;
for (var j = 0; j < tolength; j++) {
if (toSelObj.options[j].value == fromSelObj.options[i].value) {
exists = true;
}
}
if (!exists) {
var newOption = new Option(fromSelObj.options[i].text, fromSelObj.options[i].value);
toSelObj.options.add(newOption, toSelObj.options.selectedIndex);
}
}
}
}

function removeselected (selObj) {
var tolength = selObj.options.length;
for (var i = 0; i < tolength; i++) {
if (selObj.options[i].selected) {
selObj.remove(i);
}
}
}

function selectall (fromSelObj, toSelObj) {
toSelObj.options.length = 0;
fromlength = fromSelObj.options.length;
for (var i = 0; i < fromlength; i++) {
toSelObj.options[toSelObj.options.length] = new Option(fromSelObj.options[i].text, fromSelObj.options[i].value) ;
}
}

function removeall (selObj) {
selObj.options.length = 0;
}


the next thig i have to do is code the functions to change the order in the second select.

Note: what seemed a bit strange to me is the fact that the following code did not work:
toSelObj.add(fromSelObj.options[i])

the code: fromSelObj.options[i] doesn't give me an Option-object, i had to use the constructor, to create a new object and then i could add it to the select. :confused:

Nevertheless, thanks for the reply's

[Roelf]

and here is the code i managed to produce to take care of the moving of the options:

function move(selObj, direction) {
var newindex = 0;
var index = selObj.options.selectedIndex;
if (index > -1) {
var optiontomove = new Option(selObj.options[index].text, selObj.options[index].value);
selObj.remove(index);
(direction == "up")? (newindex = index - 1):(newindex);
(direction == "down")? (newindex = index + 1):(newindex);
(direction == "top")? (newindex = 0):(newindex);
(direction == "bottom")? (newindex = selObj.options.length):(newindex);
selObj.add(optiontomove, newindex);
selObj.options[newindex].selected = true;
}
}


for those who are interested

[glenngv]

why not just swap the values instead of removing/adding them.


function move(selObj, direction) {
var newindex = 0;
var index = selObj.options.selectedIndex;
if (index > -1) {
switch(direction){
case "up":
newindex = (index>0)?index-1:0;break;
case "down":
newindex = (index<(selObj.options.length-1))?(index+1):index;break;
case "top":
newindex = 0;break;
case "down":
newindex = selObj.options.length-1;break;
}
var tempVal = selObj.options[newindex].value;
var tempTxt = selObj.options[newindex].text;
selObj.options[newindex].text = selObj.options[index].text
selObj.options[newindex].value = selObj.options[index].value;
selObj.options[index].text = tempTxt;
selObj.options[index].value = tempVal;
selObj.options[index].selected = false;
selObj.options[newindex].selected = true;
}
}


i also added checking if you want to move the first item up and move the last item down.
I also un-select the item in the previous position aside from selecting the item in the new position. I assume you are using a multiple select field. you need to unselect the previous item because it will still be selected "internally" even if it is not highlighted since it is a multiple select.