SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    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,895
    Mentioned
    212 Post(s)
    Tagged
    12 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,033
    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,895
    Mentioned
    212 Post(s)
    Tagged
    12 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
  •