reidca
asked on
Multiple attribute in Select lists
Can anyone explain why the folling code does not work?
If you press the button once only one option is selected, pressing it twice works fine. Is this a bug in IE and if so is there a work around?
I have experimented with this to the point where if you uncomment out the alert box, it works first time but it is not practicle to have an alert box in the function.
<script language="Javascript">
function SelectAllOptions (theField)
{
theField.multiple = true ;
//alert("nothing") ;
for (x=0; x<theField.options.length; x++)
{
theField.options[x].select ed = true ;
}
}
</script>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions( this.form. list);">
</form>
If you press the button once only one option is selected, pressing it twice works fine. Is this a bug in IE and if so is there a work around?
I have experimented with this to the point where if you uncomment out the alert box, it works first time but it is not practicle to have an alert box in the function.
<script language="Javascript">
function SelectAllOptions (theField)
{
theField.multiple = true ;
//alert("nothing") ;
for (x=0; x<theField.options.length;
{
theField.options[x].select
}
}
</script>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions(
</form>
I changed ur code a little bit & it works fine.
<script language="Javascript">
function SelectAllOptions (theField)
{
//theField.multiple = true ;
//alert("nothing") ;
for (x=0; x<theField.options.length; x++)
{
theField.options[x].select ed = true ;
}
}
</script>
<form name="test">
<select name="list" size="5" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions( this.form. list);">
</form>
<script language="Javascript">
function SelectAllOptions (theField)
{
//theField.multiple = true ;
//alert("nothing") ;
for (x=0; x<theField.options.length;
{
theField.options[x].select
}
}
</script>
<form name="test">
<select name="list" size="5" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions(
</form>
ASKER
This does help but the function was designed like that deliberately. It will be used in an application where the user should not be able to select multiple options.
when the form is submitted a JavaScript routine is run that changes the type to multiple and selects all the options for submission to the server.
Thanks anyway.
when the form is submitted a JavaScript routine is run that changes the type to multiple and selects all the options for submission to the server.
Thanks anyway.
This should work. The timeout delay's set to 0, but it gives the browser a chance to update the select box multiple value.
<html>
<head>
<script language="Javascript">
function SelectAllOptions(formName, fieldName) {
theField = document.forms[formName].e lements[fi eldName];
for (x=0; x<theField.options.length; x++)
theField.options[x].select ed = true;
}
function SetMultiple(listObj){
listObj.multiple=true;
setTimeout("SelectAllOptio ns('"+list Obj.form.n ame+"','"+ listObj.na me+"')",0) ;
}
</script>
</head>
<body>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SetMultiple(this. form.list) ;">
</form>
</body>
</html>
<html>
<head>
<script language="Javascript">
function SelectAllOptions(formName,
theField = document.forms[formName].e
for (x=0; x<theField.options.length;
theField.options[x].select
}
function SetMultiple(listObj){
listObj.multiple=true;
setTimeout("SelectAllOptio
}
</script>
</head>
<body>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SetMultiple(this.
</form>
</body>
</html>
Just a small update - works the same as the script above except a bit tidier by passing a global object instead of the name references:
<html>
<head>
<script language="Javascript">
<!--
var listObj;
function SelectAllOptions(theField) {
theField.multiple=true;
listObj = theField;
setTimeout("SelectAllOptio nsCont(lis tObj)",0);
}
function SelectAllOptionsCont(theFi eld){
for (x=0; x<theField.options.length; x++)
theField.options[x].select ed = true;
}
//-->
</script>
</head>
<body>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions( this.form. list);">
</form>
</body>
</html>
<html>
<head>
<script language="Javascript">
<!--
var listObj;
function SelectAllOptions(theField)
theField.multiple=true;
listObj = theField;
setTimeout("SelectAllOptio
}
function SelectAllOptionsCont(theFi
for (x=0; x<theField.options.length;
theField.options[x].select
}
//-->
</script>
</head>
<body>
<form name="test">
<select name="list" size="5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<input type="button" value="select all options" onclick="SelectAllOptions(
</form>
</body>
</html>
ASKER
Thanks very much for your help James.
The idea works fine and in the above code it works fine.
The problem I am still having is that I have multiple select lists on a form, all requiring the same feature i.e.not being a multiple select list until just before the form is submitted to the server.
I call the functions one after another i.e.
SelectAllOptions(theForm.M onitoringT oolsInstal led) ;
SelectAllOptions(theForm.D iskBays) ;
SelectAllOptions(theForm.H ardDiskCon trollers) ;
SelectAllOptions(theForm.H ardDisks) ;
SelectAllOptions(theForm.M emorySlots ) ;
SelectAllOptions(theForm.M emoryModul es) ;
SelectAllOptions(theForm.E xpansionSl ots) ;
SelectAllOptions(theForm.I PAddresses ) ;
SelectAllOptions(theForm.N etworkCard s) ;
What I am finding is that using the setTimeout method as above causes only the last function call to work correctly because the script is continuing to run after each call to setTimeout. So this code works fine if there is only one call to the function but not when there are many as there are at the moment. Any further thoughts on this would be very much appreciated. Thanks.
The idea works fine and in the above code it works fine.
The problem I am still having is that I have multiple select lists on a form, all requiring the same feature i.e.not being a multiple select list until just before the form is submitted to the server.
I call the functions one after another i.e.
SelectAllOptions(theForm.M
SelectAllOptions(theForm.D
SelectAllOptions(theForm.H
SelectAllOptions(theForm.H
SelectAllOptions(theForm.M
SelectAllOptions(theForm.M
SelectAllOptions(theForm.E
SelectAllOptions(theForm.I
SelectAllOptions(theForm.N
What I am finding is that using the setTimeout method as above causes only the last function call to work correctly because the script is continuing to run after each call to setTimeout. So this code works fine if there is only one call to the function but not when there are many as there are at the moment. Any further thoughts on this would be very much appreciated. Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
James, I'm going to accept your comment as an answer.
Basically I still have problems with this routine but it's a bit difficult to explain because you can't see the form or the server side code.
Also, the answer you have provided solved the original question so thanks for that.
In the end what I have decided to do is stick to using the multiple attribute in the HTML tag but I have written a routine in Javascript for the OnChange method that detects whether the user has selected more than one option, if so it deselects all options and warns them that this is not supported. Works quite well.
I would spend more time on this but I need to push onto other things. Thanks for your help.
Basically I still have problems with this routine but it's a bit difficult to explain because you can't see the form or the server side code.
Also, the answer you have provided solved the original question so thanks for that.
In the end what I have decided to do is stick to using the multiple attribute in the HTML tag but I have written a routine in Javascript for the OnChange method that detects whether the user has selected more than one option, if so it deselects all options and warns them that this is not supported. Works quite well.
I would spend more time on this but I need to push onto other things. Thanks for your help.
<select name="list" size="5" multiple="true">
from the select tag not in the function...
hope helps