[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Multi Select Box -- onClick Select All Options HELP PLEASE

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
Lycaster
Asked:
Lycaster
  • 5
  • 4
1 Solution
 
cLFlaVACommented:
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
 
justinbilligCommented:
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
 
justinbilligCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
justinbilligCommented:
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
 
LycasterAuthor Commented:
justinbillig:

Thanks allot! this was exactly what I needed!
0
 
cLFlaVACommented:
hijacked once again.
0
 
justinbilligCommented:
Hijacked how? i improved your function, reusability my friend
0
 
cLFlaVACommented:
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
 
justinbilligCommented:
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
 
cLFlaVACommented:
you're right.  bad day i guess.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now