retrieving value of selected items in multi-select box? 2

Ovatvvon · Aug 25, 2005

Hello all,

I am trying to create a form where there will be two multi-select boxes, one listing users that have not been assigned a task, and the other listing those that are assigned. I would like the ability to select any user in any box, click on an arrow inbetween the boxes, and transfer that name to the opposite multi-select box (depending on which arrow the controller pressed, right or left). Ultimately, I want to be able to have a submit button that will send them to a processing page to update the changes to who is assigned, and who is not. (This may pose another problem, since no one will probably be selected, so how do I tell who is in what box), but regardless, at least for right now, does anyone know how I can get the value of whatever item in a multi-select is currently selected (or multiple values) so I can tranfer them over to the other box?

I tried something like:

Code:

alert(document.forms[0].multiselect1.selected.value);

to see if it would even grab the value, but errors are generated.

anyone know how to do this?

-Ovatvvon :-Q

LFI · Aug 25, 2005

Try something like this (for collection of the selected values... Saving to the database is something else entirely):

Code:

var selectedOptions = new Array();
var dfmo = document.forms[0].multiselect1.options;
for(var i=0; i<dfmo.length; i++)
{
 if(dfmo[i].selected)
  selectedOptions[selectedOptions.length] = dfmo[i].value;
}//end for

'hope that helps.

--Dave

DotNetGnat · Aug 25, 2005

i previously had this sample code...let me know if it helps you...

Code:

html>
<script language="JavaScript">
function move_lstbox_item(l1, l2) {
   if (l1.options.selectedIndex>=0) {
      o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
      l2.options[l2.options.length] = o;
      l1.options[l1.options.selectedIndex] = null;
   }
}

function enum_lstbox_items(l1, list_options) {
   list_options.value = "";
   for (var i = 0; i < l1.options.length; i++) {
      list_options.value = list_options.value + l1.options[i].value + ";";
   }
   return true;
}
</script>
<head>
</head>
<body>
Transfer an item from one list to the other with a double click
<form name=myform>
<select name="lstbox1" size=5 ondblclick="move_lstbox_item(myform.lstbox1, myform.lstbox2)" style=width:200px>
<option value="a" selected>Apricot
<option value="b">Banana
<option value="c">Cherry
<option value="d">Doughnut
<option value="e">Egg
<option value="f">Fish
</select>
<select name="lstbox2" size=5 ondblclick="move_lstbox_item(myform.lstbox2, myform.lstbox1)" style=width:200px>
</select>
<input type=hidden name=list_items value=";">
<p>
<input type=button name=B_ok value="List items in 2nd listbox" onClick="enum_lstbox_items(myform.lstbox2, list_items);alert(list_items.value)">
</form>
</body>
</html>

-DNG

Ovatvvon · Aug 25, 2005

LookingForInfo:

Once that information is in the array, how do I remove it from the one multiselect box, and populate them into the other multiselect box, in addition to what is already there?

DotNetGnat:

the code pops an alert that is empty, and it doesn't transfer the items to the other box. (I did move the script in between the head tags, and I added the left < on html, just incase you were wondering.)

-Ovatvvon :-Q

DotNetGnat · Aug 25, 2005

i just ran the code and and after you transfer some items from first list box to the second listbox by double clicking the items inthe first list box...and then hit the button..you will get an alert with the list of selected items...

didnt you get that..

-DNG

Ovatvvon · Aug 25, 2005

lol, ok, this is the point where I slap myself for not reading directions! It does work with a double click! Excellent!

-Ovatvvon :-Q

Ovatvvon · Aug 25, 2005

you wouldn't happen to know how I can then retrieve all values in the box upon submission do you? In ASP, on a normal data request, you'd get a list of all selected items in a multi-select, and all others would be ignored. But I am going to want to retrieve all data in the box - period.

Know how?

-Ovatvvon :-Q

LFI · Aug 25, 2005

[NOTE: I address the ASP question further down]

Well, I'm a little behind, but here's a little code snippet I wrote to test the move-> and <-move ability:

Code:

<html>
<head>
<script>
function doMove(source, dest)
{
 var selectSource = document.getElementById(source);
 var selectDest = document.getElementById(dest);
 for(var i=0; i<selectSource.options.length; i++)
 {
  if(selectSource.options[i].selected)
  {
   var opt = selectSource.options[i];
   selectDest.options[selectDest.length] = new Option(opt.text, opt.value);
  }//end if
 }//end for

 for(var i=selectSource.options.length-1; i>=0; i--)
 {
  if(selectSource.options[i].selected)
  {
   selectSource.options[i] = null;
  }//end if
 }//end for

 sizeRight();
}//end doMove(var, var)

function sizeRight()
{
 var one = document.getElementById("multi1");
 var two = document.getElementById("multi2");
 if(one.clientWidth > two.clientWidth)
 	two.style.width = one.clientWidth;
 else
	one.style.width = two.clientWidth;
}//end sizeRight()
</script>
</head>
<body onload='sizeRight();'>
<table width='100%' align='center'>
<tr>
<td align='center'>
<select id='multi1' multiple size='5' />
<option val='1'>Groucho</option>
<option val='2'>Harpo</option>
<option val='3'>Chico</option>
<option val='4'>Zeppo</option>
<option val='5'>Gummo</option>
</select>
</td>
<td valign='middle' align='center'>
<input type='button' value='move ->' onclick='doMove("multi1","multi2");' />
<br />
<input type='button' value='<- move' onclick='doMove("multi2","multi1");' />
</td>
<td align='center'>
<select id='multi2' multiple size='5' />
</select>
</td>
</tr>
</table>
</body>
</html>

As for the ASP, have a onsubmit event in the FORM tag call a function that does the following:

Code:

function storeRight()
{
 var rightList = document.getElementById('multi2');
 for(var i=0; i<rightList.options.length; i++)
 {
  var newHidden = document.createElement('input');
  newHidden.type = 'hidden';
  newHidden.name = 'chosen_'+i;
  newHidden.value = rightList.options[i].value;
  document.forms[0].appendChild(newHidden);  
 }//end for

 var lastHidden = document.createElement('input');
 lastHidden.type = 'hidden';
 lastHidden.name = 'numberOnRight';
 lastHidden.value = rightList.options.length;
}

Then, in the ASP, you retrieve numberOnRight to get the number of elements you can then loop and retrieve as chosen_1 through chosen_<whatever>.

Follow?

'hope that helps!

--Dave

Ovatvvon · Aug 25, 2005

Hey, I like that just a tad better, cause I can select multiple items at a time. Very nice. I will test the asp retrieval very shortly, but that sounds like it would probably work. Although, instead of creating new hidden fields, I could probably just have the hidden fields already built in and then populate them, couldn't I?

-Ovatvvon :-Q

LFI · Aug 25, 2005

Yes, but you would have to have as many hidden fields as you might possibly need to accommodate selection of all the left-hand-side elements moved to the right. If the length of that left-hand-side changes, you would have to increase the number of hidden elements you have waiting for values. Etc. But, you're right, you can do it the way you're saying.

'glad it was helpful.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

retrieving value of selected items in multi-select box? 2

Ovatvvon

Programmer

LFI

Programmer

DotNetGnat

Programmer

Ovatvvon

Programmer

DotNetGnat

Programmer

Ovatvvon

Programmer

Ovatvvon

Programmer

LFI

Programmer

Ovatvvon

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor