Information on multiple select form element 3

RhythmAddict112 · Sep 27, 2004

Hi all. I have a quick question, I'm not really sure what these types of form elements are called....Therefore I cannot find any information on them/how to build them etc....

basically I need a form list that can have multiple selects...and I need an arrow in the middle to move the selected items to the box on the right. Im sure some of you have seen these before......Do you know where I can get more info? Thanks a lot!

chessbot · Sep 27, 2004

What do you mean? Do you know of a site with an example?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

dwarfthrower · Sep 27, 2004

You've actually got to roll your own, it's not a standard HTML control, however a couple of <SELECT> tags and a handful of <BUTTON> tags, combined with some JavaScript and it's fairly easily done. It's something that I should wrap up into a FAQ I guess... Here's my standard script library for that sort of thing:

Code:

<html>
<head>
<script>
//General functions for moving options around multiple
//select lists

// Adds one or more selected options to the target
function add_selected(strSourceId, strTargetId){
 //get handles to source and target select objects
 var objSource = document.getElementById(strSourceId);
 var objTarget = document.getElementById(strTargetId);
 //loop through the options on the source
 for(var i = 0; i < objSource.options.length; i++){
  if(objSource.options[i].selected){
   //if the option is selected
   if(!has_option(strTargetId, objSource.options[i])){
    //and the target does not contain an equivalent option
	//create a new option in the target that is equivalent
	//to the selected option in the source
    newOption = new Option(objSource.options[i].text);
    newOption.value = objSource.options[i].value;
    objTarget.options[objTarget.options.length] = newOption;
   }
  }
 }
}

//Adds all of the options to the target
function add_all(strSourceId, strTargetId){
 //get handles to source and target select objects
 var objSource = document.getElementById(strSourceId);
 var objTarget = document.getElementById(strTargetId);
 //loop through the options on the source
 for(var i = 0; i < objSource.options.length; i++){
  if(!has_option(strTargetId, objSource.options[i])){
   //if the target doesn't contain an equivalent option
   //create one
   newOption = new Option(objSource.options[i].text);
   newOption.value = objSource.options[i].value;
   objTarget.options[objTarget.options.length] = newOption;
  }
 }
}

//Removes one or more selected options from the target
function remove_selected(strTargetId){
 // get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 while(objTarget.selectedIndex >= 0){
  //while there is still one or more options selected
  //remove the selected option
  objTarget.options[objTarget.selectedIndex] = null;
 }
}

//Removes all the options from the target
function remove_all(strTargetId){
 //get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 while(objTarget.options[0] != null){
  //while the first option exists
  //delete the first option
  objTarget.options[0] = null;
 }
}

//Checks for an equivalent option in the target select
function has_option(strTargetId, objOption){
 // get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 for(var i = 0; i < objTarget.options.length; i++){
  //loop through all the options
  if(objTarget.options[i].value == objOption.value){
   //if the value of the option is the same
   if(objTarget.options[i].text == objOption.text){
    //and the text of the option is the same
	//consider it a match
    return true;
   }
  }
 }
 return false;
}

</script>
</head>

<body>
 <table>
  <tr>
   <td valign="top" align="center">
    <select name="fullList" 
            id="fullList"
            multiple="multiple">
     <option value="1">Option 1</option>
	 <option value="2">Option 2</option>
	 <option value="3">Option 3</option>
	 <option value="4">Option 4</option>
	 <option value="5">Option 5</option>
	 <option value="6">Option 6</option>
	 <option value="7">Option 7</option>
	 <option value="8">Option 8</option>
	 <option value="9">Option 9</option>
	 <option value="10">Option 10</option>
    </select>
   </td>
   <td valign="middle" align="center">
    <button onclick="add_selected('fullList', 'partList');">&gt;</button><br/>
    <button onclick="add_all('fullList', 'partList');">&gt;&gt;</button><br/>
    <button onclick="remove_selected('partList');">&lt;</button><br/>
    <button onclick="remove_all('partList');">&lt;&lt;</button><br/>
   </td>
   <td valign="top" align="center">
    <select name="partList"
            id="partList"
            multiple="multiple">
    </select>
   </td>
  </tr>
 </table>
</body>
</html>

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

RhythmAddict112 · Sep 28, 2004

That is precisely what I was referring to, dwarf - thanks for the help and the code!

Is there a formal name for that? There wasn't anyway I was finding any further info on that without knownig the name - sort of makes it hard..

Sorry I didnt have an example site, chess - I know I've seen tons just couldn't think of one off hand

RhythmAddict112 · Sep 28, 2004

Okay..One more question about this....
If I moev option 1 to the PartList...And then Move option 2 to the PartList...On my next page when i response.write (with ASP) the form values, I only get one...However, if I CTRL + Select multiple....I get all the values that I have selected....do you know of a rememdy for this?

Thanks again for your help!

RhythmAddict112 · Sep 28, 2004

Correction: the problem is that when I move items into PartList they aren't passed forward when submitted because they are not selected/highlighted. Is there a way to modify that JavaScript so they are highlighted by default (and possibly disable the users ability to deselect anythin in the PartList select?) Thank you

chessbot · Sep 28, 2004

A select box can only have one object selected at once. However, if the boxes use only text, the code could be modified to use a textbox instead of a select (so as to pass all of the values).

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

RhythmAddict112 · Sep 28, 2004

You can have multiple selections inside a list box....by adding "multiple" in the <select> tag. Also, I added this function:

Code:

function selAll(_v) {
for(var i=0;i<document.list.partlist.length;i++)
  document.list.partlist[i].selected=_v;
}

To fire onClick on my submit button and wallah. Works just how i want it...I can grab all the values on the next page because they are all automatically highlighted/selected when the user clicks submit.

Thanks for everyones help!

chessbot · Sep 28, 2004

In the select box, though one can select multiple items, only the first one registers as selected.
Tests:
1. javascript:alert(document.getElementById("partList").selectedIndex) returns the index of the first box

2. javascript:alert(document.getElementById("partList").value) returns the value of the second box

3. If multiple boxes are selected in the first box, only the first one is shifted.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

RhythmAddict112 · Sep 28, 2004

This is true..However with the function I have above everything is selected when submit is clicked (ie, the equiv of a user ctrl-click on each item) and therefore my form is passed values like:
x,y,z,etc... where I grab them on the next page.

Code:

<html>
<head>
<script>
function selAll(_v) {
for(var i=0;i<document.list.partlist.length;i++)
  document.list.partlist[i].selected=_v;
}
 

//General functions for moving options around multiple
//select lists

// Adds one or more selected options to the target
function add_selected(strSourceId, strTargetId){
 //get handles to source and target select objects
 var objSource = document.getElementById(strSourceId);
 var objTarget = document.getElementById(strTargetId);
 //loop through the options on the source
 for(var i = 0; i < objSource.options.length; i++){
  if(objSource.options[i].selected){
   //if the option is selected
   if(!has_option(strTargetId, objSource.options[i])){
    //and the target does not contain an equivalent option
    //create a new option in the target that is equivalent
    //to the selected option in the source
    newOption = new Option(objSource.options[i].text);
    newOption.value = objSource.options[i].value;
    objTarget.options[objTarget.options.length] = newOption;
   }
  }
 }
}

//Adds all of the options to the target
function add_all(strSourceId, strTargetId){
 //get handles to source and target select objects
 var objSource = document.getElementById(strSourceId);
 var objTarget = document.getElementById(strTargetId);
 //loop through the options on the source
 for(var i = 0; i < objSource.options.length; i++){
  if(!has_option(strTargetId, objSource.options[i])){
   //if the target doesn't contain an equivalent option
   //create one
   newOption = new Option(objSource.options[i].text);
   newOption.value = objSource.options[i].value;
   objTarget.options[objTarget.options.length] = newOption;
  }
 }
}

//Removes one or more selected options from the target
function remove_selected(strTargetId){
 // get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 while(objTarget.selectedIndex >= 0){
  //while there is still one or more options selected
  //remove the selected option
  objTarget.options[objTarget.selectedIndex] = null;
 }
}

//Removes all the options from the target
function remove_all(strTargetId){
 //get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 while(objTarget.options[0] != null){
  //while the first option exists
  //delete the first option
  objTarget.options[0] = null;
 }
}

//Checks for an equivalent option in the target select
function has_option(strTargetId, objOption){
 // get a handle to the target select
 var objTarget = document.getElementById(strTargetId);
 for(var i = 0; i < objTarget.options.length; i++){
  //loop through all the options
  if(objTarget.options[i].value == objOption.value){
   //if the value of the option is the same
   if(objTarget.options[i].text == objOption.text){
    //and the text of the option is the same
    //consider it a match
    return true;
   }
  }
 }
 return false;
}

</script>
</head>

<body>
 <table border="0">
  <tr>
   <td valign="top" align="center">
   <form Action="WriteZones.Asp" Method="Post" Name="list">
    <select name="fullList" 
            id="fullList"
            multiple="multiple"
			size="10"
			>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
     <option value="4">Option 4</option>
     <option value="5">Option 5</option>
     <option value="6">Option 6</option>
     <option value="7">Option 7</option>
     <option value="8">Option 8</option>
     <option value="9">Option 9</option>
     <option value="10">Option 10</option>
    </select>
   </td>
   <td valign="middle" align="center" width="50">
    <button onclick="add_selected('fullList', 'partList');">&gt;</button><br/>
    <button onclick="add_all('fullList', 'partList');">&gt;&gt;</button><br/>
    <button onclick="remove_selected('partList');">&lt;</button><br/>
    <button onclick="remove_all('partList');">&lt;&lt;</button><br/>
   </td>
   <td valign="top" align="center">
    <select name="partlist"
            id="partlist"
            multiple="multiple"
			size="10"
			class="Listbox"
			>
    </select>
	
	</td>
 </tr>
  <tr>
	<td colspan="3" align="right">
	<input type="submit" value="Save" onclick="selAll(true)">
	</form>	
	</td>
  </tr>
 </table>
 
</body>
</html>

chessbot · Sep 28, 2004

So you receive an array of the selected values?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

RhythmAddict112 · Sep 28, 2004

Essentially yes, I'm not sure if that is technically an array in programmatic terms...but semantics take a backseat since it's working as intended.

Do you see any issues with this technique? [note:everyone on IE as it as intra]

chessbot · Sep 28, 2004

If it works, don't mess with it!

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

RhythmAddict112 · Sep 28, 2004

Amen!

tmcneil · Oct 29, 2004

Is it possible to set the width of a multiple select list box? I used your code at the top of this thread to include in my development, but when I don't like the list boxes changing their sizes depending upon the length of the string in it. It's some cool stuff.

If the list box is empty, then its very small. how can I control the size so that the controls are jumping around all over the place.

Todd

chessbot · Oct 29, 2004

In the head:

Code:

<style type="text/css">
<!--

#partList {
    width: 150px; /* Mess with this number */
    }

-->
</style>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

RhythmAddict112 · Oct 29, 2004

Sure. Use CSS. Just an example, makin this VERY wide.

Code:

<!--
.t {
	width: 255px;
}
-->

this is snipped, but is exactly the same JS code as above

Code:

  <td valign="middle" align="center" width="50">
    <button onclick="add_selected('fullList', 'partList');">&gt;</button><br/>
    <button onclick="add_all('fullList', 'partList');">&gt;&gt;</button><br/>
    <button onclick="remove_selected('partList');">&lt;</button><br/>
    <button onclick="remove_all('partList');">&lt;&lt;</button><br/>
   </td>
   <td valign="top" align="center">
    <select class=t name="partList"
            id="partList"
            multiple="multiple"
			size="10"
			>
    </select>
   </td>
  </tr>
 </table>

Hope that helped.

tmcneil · Nov 1, 2004

Thanks guys. I set the width in this manner:

<select name="fullList" id="fullList" size="10" style="width:250px;">

Todd

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!

Information on multiple select form element 3

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor