[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Multi Select Box -- onClick Select All Options HELP PLEASE

Posted on 2004-10-26
10
Medium Priority
?
230 Views
Last Modified: 2008-02-01
I have a multi-select list box that has its frist option as "Select All"

<option value="">Select All</option>
<option value="1">Sample Value 1</option>
<option value="2">Sample Value 2</option>

I need a script that can select all the options in the list by clicking on the "Select All" option. The trick here is that these multi-selects are dynamic and can have any number of options at any given time. Is this possible?
0
Comment
Question by:Lycaster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12412406
Here's an example:

function doThing(si) {
    var s = document.forms['the_form'].elements['the_sel'];
    if (si == 0) {
        for (var i = 1; i < s.options.length; i++) {
            s.options[i].selected = true;
            }
      }
}

...

<form name="the_form">

<select multiple name="the_sel" size="4" onchange="doThing(this.selectedIndex);">
  <option>Select All!</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

</form>
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12412752
a slight modficiation to to clflava's ... it will work for with any select box


function SelectAll( objTargetSelectBox )
{

  if (objTargetSelectBox.selectedIndex == 0) {
        for (var i = 1; i < objTargetSelectBox.options.length; i++) {
            objTargetSelectBox.options[i].selected = true;
          }
     }
}



}
<form name="the_form">

<select multiple name="the_sel" size="4" onchange="SelectAll( this );">
  <option>Select All!</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

</form>
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12412779
Slight error in previous code



<script language="javascript">


function SelectAll( objTargetSelectBox )
{
      // Is this the first option?
      if (objTargetSelectBox.selectedIndex == 0)
       {
            // Yes, loop through and select all
            for (var i = 1; i < objTargetSelectBox.options.length; i++)
             {
                  objTargetSelectBox.options[i].selected = true;
                }
        }

            

}


</script>


<html>
      <body>
            <form name="the_form">
            
                  <select multiple name="the_sel" size="4" onchange="SelectAll( this );">
                    <option>Select All!</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                  </select>
      
            </form>
      </body>
</html>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 15

Accepted Solution

by:
justinbillig earned 500 total points
ID: 12412788
This version will select all options except for the Select All!! Option



<script language="javascript">


function SelectAll( objTargetSelectBox )
{
      // Is this the first option?
      if (objTargetSelectBox.selectedIndex == 0)
       {
            // Yes, loop through and select all
            for (var i = 1; i < objTargetSelectBox.options.length; i++)
             {
                  objTargetSelectBox.options[i].selected = true;
                }
        }

      // Deselect the select all
      objTargetSelectBox.options[ 0 ].selected = false;            

}


</script>


<html>
      <body>
            <form name="the_form">
            
                  <select multiple name="the_sel" size="4" onchange="SelectAll( this );">
                    <option>Select All!</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                  </select>
      
            </form>
      </body>
</html>
0
 

Author Comment

by:Lycaster
ID: 12412823
justinbillig:

Thanks allot! this was exactly what I needed!
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12412857
hijacked once again.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12412893
Hijacked how? i improved your function, reusability my friend
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12413098
just the fact that 90% of the code used was mine.  not your fault.  i've 'improved' on some of your code in the past as well, and when i received points you speculated that this site was 'the bane of your existence'.

i just don't like spending time on a solution, leaving for five minutes to find that someone else has received the gratitude for making slight changes to someone else's work.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12413456
Sorry to drag this out but i feel a need to defend myself.

This is the question you bring up

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21161099.html


You got the points for adding one character to my suggestion, I know it's not your fault that the user didnt split the points but this is different.


"that 90% of the code used was mine"

I have a question. How many different ways would someone go about doing this solution. While the structure of our code is the same i wouldnt say i used your code, i answered the question in the most effiecient matter. My code is very different from yours. Not only is it slightly more readable, but it uses the object reference in the paramter instead of just the selected index. Your code is very specific to that form and that select box. I generalized it to work for any form / any select box. So they are different.

I don't want you to feel like I am attacking you. You and I both know that it is not up to either of us to dole out the points, but I didn't post on this question to "hijack" your points, i posted a more efficient , reuseable solution that the one you suggested

0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12413501
you're right.  bad day i guess.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question