www.webdeveloper.com
Results 1 to 11 of 11

Thread: Select option Box set all to selected

  1. #1
    Join Date
    Nov 2005
    Posts
    18

    Select option Box set all to selected

    Hi I would like a button on my page that will automatically set all the options to selected

    I have a select box
    HTML Code:
    <select multiple="multiple" name="selVselect val">
    
    <option value="2003SS">2003SS</option>
    <option value="2003WA">2003WA</option>
    <option value="2004SS">2004SS</option>
    <option value="2004WA">2004WA</option>
    <option value="2005SS">2005SS</option>
    <option value="2005WA">2005WA</option>
    <option value="2006SS">2006SS</option>
    
    
    </select>
    My function:
    Code:
    function selectall(f, control){
    var controlName = "selV" + control;
    oBoxList = document.forms[f].controlName;
    
    for(var i=0; i<oBoxList.options.length;i++){
    		oBoxList.options[i].selected=true;
    
    }
    
    
    }
    My button:
    HTML Code:
    <input type="button" value="select" onclick="selectall(this.form, select val">
    the error I am getting is
    Error: document.forms[f] has no properties

    Please can anyone help?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Use JSON to write dynamically the objects properties
    Code:
    function selectall(f,control){
    var opt = document.forms[f].elements['selV'+control].options;
    var i=0, o;
    while(o=opt[i++]){
    o.selected=true;
    }
    }
    make sure the the argument f is the name of the form. And, quite important, don't use empty spaces in names or ids. You may use underscore:
    Code:
    <select multiple="multiple" name="selVselect_val">

  3. #3
    Join Date
    Jun 2006
    Posts
    384
    well, first you're passing in f which is the form object so instead of
    Code:
    oBoxList = document.forms[f].controlName;
    you just want

    Code:
    oBoxList = f.controlName;
    assuming both select box and button are in the same form.

    Then you're missing a closing bracket in the onclick function here :
    Code:
    <input type="button" value="select" onclick="selectall(this.form, select val">
    Then this :
    Code:
    onclick="selectall(this.form, select val)
    variable name cannot contain spaces, which brings me to this :
    Code:
    name="selVselect val"
    the name cannot have a space in it either.

  4. #4
    Join Date
    May 2007
    Posts
    120
    What is the name of your form. Is there more than one forms?

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Well, yes, f seems to be the form object, thus my code will become:
    Code:
    function selectall(f,control){
    var opt = f['selV'+control].options;
    var i=0, o;
    while(o=opt[i++]){
    o.selected=true;
    }
    }
    ...
    <select multiple="multiple" name="selVselect_val">
    ...
    <input type="button" value="select" onclick="selectall(this.form,select_val">

  6. #6
    Join Date
    Jun 2006
    Posts
    384
    This works:

    Code:
    <html>
    <body>
    
    <script>
    function selectall(f, control)
    {
    	var controlName = "selV" + control;
    	oBoxList = f[controlName];
    
    	for(i=0; i<oBoxList.options.length;i++)
    	{
    		oBoxList.options[i].selected=true;
    	}
    
    }
    </script>
    
    <form>
    <input type="button" value="select" onclick="selectall(this.form, 'select')" />
    <select multiple="multiple" name="selVselect">
    
    <option value="2003SS">2003SS</option>
    <option value="2003WA">2003WA</option>
    <option value="2004SS">2004SS</option>
    <option value="2004WA">2004WA</option>
    <option value="2005SS">2005SS</option>
    <option value="2005WA">2005WA</option>
    <option value="2006SS">2006SS</option>
    
    
    </select>
    </form>
    </body>
    </html>

  7. #7
    Join Date
    Nov 2005
    Posts
    18
    Thanks you I have it working from a combination of your posts thanks

    Code:
    function selectall(f, control){
    var controlName = "selV" + control;
    var opt = f.elements[controlName].options;
    
    var i=0, o;
    while(o=opt[i++]){
    o.selected=true;
    }
    
    
    }
    It does work with spaces. I also need it to. I am writing an interface into my crystal reports server and the Select box name is created from from the parameter name so I need it to be able to work with spaces.

    I suppose I could write a function that will iterate through the parameter name and replace spaces with _. but it seems to work fine with space all I have to do is

    Code:
    <input type="button" value="select" onclick="selectall(this.form, '<%=reportParameter.getParameterName()%>')">
    thanks again

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by vagasv1
    It does work with spaces. I also need it to.
    It does not matter what you need or want to, it matters only which is correctly written syntax. It is just incorrect to use spaces inside the id or name tokens (for reasons which overpass the beginner's needs to know). Some browsers might not like that and you might have problems:
    See also:
    http://www.w3.org/TR/html401/types.h...html#type-name

  9. #9
    Join Date
    Nov 2005
    Posts
    18
    Yes Kor I do agree. If it was you would you write a funtction that will replace spaces with _s? I am not sure what is the best way to resolve this problem

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You must let the ASP application to do that and write the names with underscore...

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    By the way, why do you need those spaces?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles