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

JavaScript
1

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

2

Hi there,

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

<!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

Hi,

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

ThanX,

4

Sure thing.

<!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>