SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to get the number of elements selected as user clicks on options in a Select

    Hi,

    I have a rather challenging question. Best asked by explaining:

    1- We have a form which has a Select item, which Select item is like:
    <select name="country[]" size="5" onclick="get_state_vals(this.value)" class="select_width input_text" multiple>

    2- What we want to do is to take a different action based on how many Options they have selected. To be exact if they have selected only one country we want to call: onclick="get_state_vals(this.value)", but if they have selected more than one country then we want to call a different function

    How can this be done?

    ThanX

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    You can use the :selected selector in combination with .length, to find out how many options have been selected:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Select example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #result{
            width:300px;
            margin:15px 0;
            padding:5px;
            border: 1px solid gray;
          }
        </style>
      </head>
      
      <body>
        <form>
          <select multiple="multiple" name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
          </select>
        </form>
        
        <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
        <div id="result">Watch this space</div>
        
        <script>
          $(document).ready(function() {
            $("#cars").click(function(){
              if ($("#cars :selected").length == 1){
                //call function one here
                $("#result").html("Exactly one option selected")
                $("#result").css("background", "yellow");
              } else {
                // or call function 2 here
                $("#result").html("More than one option selected")
                $("#result").css("background", "green");
              }
            })
          });
        </script>
      </body>
    </html>
    HTH

    Edit: Obviously I'm using jQuery, but I imagine that you could quite easily do this without

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    can you give me this answer/suggestion in Javascript and not JQuery?

    ThanX,

    Quote Originally Posted by Pullo View Post
    Hi there,
    You can use the :selected selector in combination with .length, to find out how many options have been selected:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Select example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #result{
            width:300px;
            margin:15px 0;
            padding:5px;
            border: 1px solid gray;
          }
        </style>
      </head>
      
      <body>
        <form>
          <select multiple="multiple" name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
          </select>
        </form>
        
        <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
        <div id="result">Watch this space</div>
        
        <script>
          $(document).ready(function() {
            $("#cars").click(function(){
              if ($("#cars :selected").length == 1){
                //call function one here
                $("#result").html("Exactly one option selected")
                $("#result").css("background", "yellow");
              } else {
                // or call function 2 here
                $("#result").html("More than one option selected")
                $("#result").css("background", "green");
              }
            })
          });
        </script>
      </body>
    </html>
    HTH

    Edit: Obviously I'm using jQuery, but I imagine that you could quite easily do this without

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by WorldNews View Post
    can you give me this answer/suggestion in Javascript and not JQuery?
    Sure thing.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Select example - no jQuery</title>
        <style>
          #result{
            width:300px;
            margin:15px 0;
            padding:5px;
            border: 1px solid gray;
          }
        </style>
      </head>
      
      <body>
        <form>
          <select multiple="multiple" name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
          </select>
        </form>
        
        <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
        <div id="result">Watch this space</div>
        
        <script>
          window.onload = function(){
            var sel = document.getElementById("cars");
            var res = document.getElementById("result");
            
            sel.onclick = function() {
              var numOptionsSelected = 0;
              for(var i=0; i<sel.options.length; i++) {
                if (sel.options[i].selected){
                  numOptionsSelected++;
                }
              }
              
              if (numOptionsSelected == 1){
                // Exactly one option selected
                res.innerHTML="Exactly one option selected";
                res.style.backgroundColor = "yellow";
              } else {
                // More than one option selected
                res.innerHTML="More than one option selected";
                res.style.backgroundColor = "green";
              }
              numOptionsSelected = 0;
            };
          };
        </script>
      </body>
    </html>


Bookmarks

Posting Permissions

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