|
 |
asp_web_howto thread: MultiSelect in List Box - strange behavior
Message #1 by "Rita Greenberg" <rg1@h...> on Mon, 26 Mar 2001 23:01:54
|
|
Hi.
I have 2 list boxes, both multiselect. The user can multi select options
from box1 and by clicking on a button, have these options added to list
box2.
Something really strange happens when the user selects options that are
next to one another. Say I have 6 options in list box1. User selects
option1, option3 and option5 and clicks a button to add to list box2 - no
problem.
User selects option1, option2, option4 and option5. Only option1 and
option4 are added to list box2!
Here's my code and any suggestions would be greatly appreciated!:
<script language="JavaScript">
<!--
/* Add groups selected from Groups Available list box to Groups Selected
list box */
function addtolist()
{
/* Find selected items to add */
var cSelect = document.all.item("oGroups"); /* List
box1 */
var cOut = document.all.item("oSelected"); /* List
box2 */
for (var i=0; i<cSelect.options.length; i++) {
/* Check to see if a particular option is selected */
if(cSelect.options(i).selected) {
/* Add new option to "Groups Selected" list box */
cOut.options[cOut.options.length]= new Option
(cSelect.options(i).text, "value " + i);
cSelect.remove(i)
}
}
}
-->
</script>
Rita
Message #2 by "Peter Lanoie" <planoie@e...> on Mon, 26 Mar 2001 19:36:20 -0500
|
|
Rita, I've read your posts, and dug up this little piece of code I wrote for
doing just what you are trying to do. It should take care of the problems of
dealing with the indexing and other stuff.
Note: Your strange behavior of adjacent selects is due this line...
cSelect.remove(i)
Say you select 3 and 4, you hit the point in the loop that 3 is selected,
you do your magic, then you REMOVE 3...
Now 4 becomes 3, but your loop advances to 4, so it skips what was 4 (which
is now 3). :-& (that's the tougue tied smiley)
So... try this on for size. Also threw in some test ASP/HTML. Email
wrapping is going to murder this. :)
<script language="JavaScript">
<!--
// Function requires 3 arguments: Left selectbox object, right selectbox
object
// and the direction: 0 = Right, 1 = Left
// Pass optional parameters: destination text box and string delimiter
// selectorMove (LeftSelect, RightSelect, Direction [, DestField,
Delimiter])
function selectorMove (objLeftSelect, objRightSelect, nDirection) {
var sSelectedText // this is what you see
var sSelectedValue // this is the data (value attribute)
var objSelInsertTo, objSelGetFrom; // you select box objects
var objDestField, sDelimiter; //destination field and a string delimiter
var i, n; // loops and place holders.
sDelimiter = " "; //default delimiter to a space
n = -1; // default n to -1 to flag that NO options were selected
switch (nDirection) {
case 0: // right
objSelGetFrom = objLeftSelect; // get from the left
objSelInsertTo = objRightSelect; // put in the right
break;
case 1: // left
objSelGetFrom = objRightSelect; // get from the right
objSelInsertTo = objLeftSelect; // put to the left
break;
}// end switch
for (i=0; i<objSelGetFrom.length; i++) { // go through all options
if (objSelGetFrom[i].selected == true) { // is it selected?
sSelectedText = objSelGetFrom[i].text; // get the text
sSelectedValue = objSelGetFrom[i].value; // get the value
objSelInsertTo.length++; // add one to insert select box
n = objSelInsertTo.length - 1; // get the new option index
objSelInsertTo.options[n].text = sSelectedText; // populate
objSelInsertTo.options[n].value = sSelectedValue; // option
objSelGetFrom.options[i] = null; // remove the old option
// we removed one, so we need to stay where we are in the loop
// in order to check the next option
i --;
}// end if
}// end for loop
// if there's a destination argument and n is 0 or greater
// no need to recreate delimited string if nothing changed.
if( (arguments.length > 3) && (n >= 0) )
if( arguments[3] != undefined ) { // if it's a valid form element
objDestField = arguments[3]; // get the field reference
objDestField.value = ''; // clear the field
if( arguments.length > 4 ) { // if there's a delimiter argument
sDelimiter = arguments[4]; // get the delimiter
}// end if
for ( i = 0; i < objRightSelect.length; i++) { // for all options
if ( i > 0 ) objDestField.value += sDelimiter; // add delimiter
objDestField.value += objRightSelect[i].value // add value
}// end for
}// end if
}// end if
}// end function
//-->
</script>
<form name="Form1">
<input type="Text" name="Text1"><br>
<select name="Select1" size="10" multiple>
<%Dim i
For i = 1 to 20%>
<option value="<%=i%>"><%=i%></option>
<%Next%>
</select>
<input type="Button" name="cmdMove" value="<---"
onclick="selectorMove(this.form.Select1, this.form.Select2, 1,
this.form.Text1, ',;')">
<input type="Button" name="cmdMove" value="--->"
onclick="selectorMove(this.form.Select1, this.form.Select2, 0,
this.form.Text1, ',')">
<select name="Select2" size="10" multiple>
</select>
</form>
Now you can use the text box (or as a hidden field) to capture all the
values you have in the right select box. Then in ASP just do a VBScript
Split and you do what you need with each value.
Hope that helps.
Peter
-----Original Message-----
From: Rita Greenberg [mailto:rg1@h...]
Sent: Monday, March 26, 2001 6:02 PM
To: ASP Web HowTo
Subject: [asp_web_howto] MultiSelect in List Box - strange behavior
Hi.
I have 2 list boxes, both multiselect. The user can multi select options
from box1 and by clicking on a button, have these options added to list
box2.
Something really strange happens when the user selects options that are
next to one another. Say I have 6 options in list box1. User selects
option1, option3 and option5 and clicks a button to add to list box2 - no
problem.
User selects option1, option2, option4 and option5. Only option1 and
option4 are added to list box2!
Here's my code and any suggestions would be greatly appreciated!:
<script language="JavaScript">
<!--
/* Add groups selected from Groups Available list box to Groups Selected
list box */
function addtolist()
{
/* Find selected items to add */
var cSelect = document.all.item("oGroups"); /* List
box1 */
var cOut = document.all.item("oSelected"); /* List
box2 */
for (var i=0; i<cSelect.options.length; i++) {
/* Check to see if a particular option is selected */
if(cSelect.options(i).selected) {
/* Add new option to "Groups Selected" list box */
cOut.options[cOut.options.length]= new Option
(cSelect.options(i).text, "value " + i);
cSelect.remove(i)
}
}
}
-->
</script>
Rita
Message #3 by bharath reddy <bharath_reddy@u...> on 27 Mar 2001 01:55:46 MST
|
|
Hi,
Hope this helps ...
The error happens cause. when an item in the list is removed the lenght o
f the
list reduces and the items selected moves up . .. and simul.. the loop
increases. thus skipping the items....
function addtolist()
{
var cSelect =3D document.all.item("oGroups"); /* List
box1 */
var cOut =3D document.all.item("oSelected"); /* List
box2 */
count =3D 0;
Len =3D cSelect.options.length;
for (var j=3D0; j < Len; j++)
{
i1 =3D j - count;
if(cSelect.options(i1).selected)
{
a1=3D new Option(cSelect.options(i1).text, "value " + i1);
cOut.options[cOut.options.length] =3D a1
cSelect.options[i1] =3D null; ///u can also use remove to remove the e
lement
count =3D count+1;
}
}
}
-->
</script>
"Rita Greenberg" <rg1@h...> wrote:
Hi.
I have 2 list boxes, both multiselect. The user can multi select options
from box1 and by clicking on a button, have these options added to list
box2.
Something really strange happens when the user selects options that are
next to one another. Say I have 6 options in list box1. User selects
option1, option3 and option5 and clicks a button to add to list box2 - no
problem.
User selects option1, option2, option4 and option5. Only option1 and
option4 are added to list box2!
Here's my code and any suggestions would be greatly appreciated!:
<script language=3D"JavaScript">
<!--
/* Add groups selected from Groups Available list box to Groups Selected
list box */
function addtolist()
{
/* Find selected items to add */
var cSelect =3D document.all.item("oGroups"); /* List
box1 */
var cOut =3D document.all.item("oSelected"); /* List
box2 */
for (var i=3D0; i<cSelect.options.length; i++) {
/* Check to see if a particular option is selected */
if(cSelect.options(i).selected) {
/* Add new option to "Groups Selected" list box */
cOut.options[cOut.options.length]=3D new Option
(cSelect.options(i).text, "value " + i);
cSelect.remove(i)
}
}
}
-->
</script>
Rita
Message #4 by Rita Greenberg <rg1@h...> on Tue, 27 Mar 2001 08:13:52 -0800
|
|
Hi Peter.
Thanks for your response. I was hoping for something a little less
complicated! What's interesting is that when I "Remove" options from list
box2 back to list box1, I don't have the Indexing problem of starting with
Index 1.
Rita
-----Original Message-----
From: Peter Lanoie [mailto:planoie@e...]
Sent: Monday, March 26, 2001 4:36 PM
To: ASP Web HowTo
Subject: [asp_web_howto] RE: MultiSelect in List Box - strange behavior
Rita, I've read your posts, and dug up this little piece of code I wrote for
doing just what you are trying to do. It should take care of the problems of
dealing with the indexing and other stuff.
Note: Your strange behavior of adjacent selects is due this line...
cSelect.remove(i)
Say you select 3 and 4, you hit the point in the loop that 3 is selected,
you do your magic, then you REMOVE 3...
Now 4 becomes 3, but your loop advances to 4, so it skips what was 4 (which
is now 3). :-& (that's the tougue tied smiley)
So... try this on for size. Also threw in some test ASP/HTML. Email
wrapping is going to murder this. :)
<script language="JavaScript">
<!--
// Function requires 3 arguments: Left selectbox object, right selectbox
object
// and the direction: 0 = Right, 1 = Left
// Pass optional parameters: destination text box and string delimiter
// selectorMove (LeftSelect, RightSelect, Direction [, DestField,
Delimiter])
function selectorMove (objLeftSelect, objRightSelect, nDirection) {
var sSelectedText // this is what you see
var sSelectedValue // this is the data (value attribute)
var objSelInsertTo, objSelGetFrom; // you select box objects
var objDestField, sDelimiter; //destination field and a string
delimiter
var i, n; // loops and place holders.
sDelimiter = " "; //default delimiter to a space
n = -1; // default n to -1 to flag that NO options were selected
switch (nDirection) {
case 0: // right
objSelGetFrom = objLeftSelect; // get from the left
objSelInsertTo = objRightSelect; // put in the right
break;
case 1: // left
objSelGetFrom = objRightSelect; // get from the
right
objSelInsertTo = objLeftSelect; // put to the left
break;
}// end switch
for (i=0; i<objSelGetFrom.length; i++) { // go through all options
if (objSelGetFrom[i].selected == true) { // is it selected?
sSelectedText = objSelGetFrom[i].text; // get the
text
sSelectedValue = objSelGetFrom[i].value; // get the
value
objSelInsertTo.length++; // add one to insert select
box
n = objSelInsertTo.length - 1; // get the new option
index
objSelInsertTo.options[n].text = sSelectedText; //
populate
objSelInsertTo.options[n].value = sSelectedValue; //
option
objSelGetFrom.options[i] = null; // remove the old
option
// we removed one, so we need to stay where we are
in the loop
// in order to check the next option
i --;
}// end if
}// end for loop
// if there's a destination argument and n is 0 or greater
// no need to recreate delimited string if nothing changed.
if( (arguments.length > 3) && (n >= 0) )
if( arguments[3] != undefined ) { // if it's a valid form
element
objDestField = arguments[3]; // get the field
reference
objDestField.value = ''; // clear the field
if( arguments.length > 4 ) { // if there's a
delimiter argument
sDelimiter = arguments[4]; // get the
delimiter
}// end if
for ( i = 0; i < objRightSelect.length; i++) { //
for all options
if ( i > 0 ) objDestField.value +
sDelimiter; // add delimiter
objDestField.value +
objRightSelect[i].value // add value
}// end for
}// end if
}// end if
}// end function
//-->
</script>
<form name="Form1">
<input type="Text" name="Text1"><br>
<select name="Select1" size="10" multiple>
<%Dim i
For i = 1 to 20%>
<option value="<%=i%>"><%=i%></option>
<%Next%>
</select>
<input type="Button" name="cmdMove" value="<---"
onclick="selectorMove(this.form.Select1, this.form.Select2, 1,
this.form.Text1, ',;')">
<input type="Button" name="cmdMove" value="--->"
onclick="selectorMove(this.form.Select1, this.form.Select2, 0,
this.form.Text1, ',')">
<select name="Select2" size="10" multiple>
</select>
</form>
Now you can use the text box (or as a hidden field) to capture all the
values you have in the right select box. Then in ASP just do a VBScript
Split and you do what you need with each value.
Hope that helps.
Peter
-----Original Message-----
From: Rita Greenberg [mailto:rg1@h...]
Sent: Monday, March 26, 2001 6:02 PM
To: ASP Web HowTo
Subject: [asp_web_howto] MultiSelect in List Box - strange behavior
Hi.
I have 2 list boxes, both multiselect. The user can multi select options
from box1 and by clicking on a button, have these options added to list
box2.
Something really strange happens when the user selects options that are
next to one another. Say I have 6 options in list box1. User selects
option1, option3 and option5 and clicks a button to add to list box2 - no
problem.
User selects option1, option2, option4 and option5. Only option1 and
option4 are added to list box2!
Here's my code and any suggestions would be greatly appreciated!:
<script language="JavaScript">
<!--
/* Add groups selected from Groups Available list box to Groups Selected
list box */
function addtolist()
{
/* Find selected items to add */
var cSelect = document.all.item("oGroups"); /* List
box1 */
var cOut = document.all.item("oSelected"); /* List
box2 */
for (var i=0; i<cSelect.options.length; i++) {
/* Check to see if a particular option is selected */
if(cSelect.options(i).selected) {
/* Add new option to "Groups Selected" list box */
cOut.options[cOut.options.length]= new Option
(cSelect.options(i).text, "value " + i);
cSelect.remove(i)
}
}
}
-->
</script>
Rita
Message #5 by Rita Greenberg <rg1@h...> on Tue, 27 Mar 2001 07:51:07 -0800
|
|
Hi.
I played around with it a bit more yesterday and by adding "i--" as the last
statement in the loop, it worked fine.
Thanks for your response.
Rita
-----Original Message-----
From: bharath reddy [mailto:bharath_reddy@u...]
Sent: Tuesday, March 27, 2001 12:56 AM
To: ASP Web HowTo
Subject: [asp_web_howto] Re: [MultiSelect in List Box - strange
behavior]
Hi,
Hope this helps ...
The error happens cause. when an item in the list is removed the lenght of
the
list reduces and the items selected moves up . .. and simul.. the loop
increases. thus skipping the items....
function addtolist()
{
var cSelect = document.all.item("oGroups"); /* List
box1 */
var cOut = document.all.item("oSelected"); /* List
box2 */
count = 0;
Len = cSelect.options.length;
for (var j=0; j < Len; j++)
{
i1 = j - count;
if(cSelect.options(i1).selected)
{
a1= new Option(cSelect.options(i1).text, "value " + i1);
cOut.options[cOut.options.length] = a1
cSelect.options[i1] = null; ///u can also use remove to remove the
element
count = count+1;
}
}
}
-->
</script>
"Rita Greenberg" <rg1@h...> wrote:
Hi.
I have 2 list boxes, both multiselect. The user can multi select options
from box1 and by clicking on a button, have these options added to list
box2.
Something really strange happens when the user selects options that are
next to one another. Say I have 6 options in list box1. User selects
option1, option3 and option5 and clicks a button to add to list box2 - no
problem.
User selects option1, option2, option4 and option5. Only option1 and
option4 are added to list box2!
Here's my code and any suggestions would be greatly appreciated!:
<script language="JavaScript">
<!--
/* Add groups selected from Groups Available list box to Groups Selected
list box */
function addtolist()
{
/* Find selected items to add */
var cSelect = document.all.item("oGroups"); /* List
box1 */
var cOut = document.all.item("oSelected"); /* List
box2 */
for (var i=0; i<cSelect.options.length; i++) {
/* Check to see if a particular option is selected */
if(cSelect.options(i).selected) {
/* Add new option to "Groups Selected" list box */
cOut.options[cOut.options.length]= new Option
(cSelect.options(i).text, "value " + i);
cSelect.remove(i)
}
}
}
-->
</script>
Rita
|
|
|
View Cart
