Solved

Multi Select Box -- onClick Select All Options HELP PLEASE

Posted on 2004-10-26
220 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
Question by:Lycaster
    10 Comments
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    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
    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
    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
     
    LVL 15

    Accepted Solution

    by:
    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
    justinbillig:

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

    Expert Comment

    by:cLFlaVA
    hijacked once again.
    0
     
    LVL 15

    Expert Comment

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

    Expert Comment

    by:cLFlaVA
    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
    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
    you're right.  bad day i guess.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    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…

    884 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now