Identify last selection made on list box

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571

    Identify last selection made on list box

    I have a list box and want to limit the user to selecting a max of 5 items from the list. I've put in a counter which warns the user that more than 5 items have been selected, however I cannot reverse the users selection of the last item in the select box as I cannot identify which of the items was the last. I store the list of selected items in a hidden field on change. That one is no problem, but I want to reflect which items have been selected.

    The options shown are just examples, the actual list is much longer. It would be nice if I could identify the current selection. Right now I only see one option and that is to repopulate the options array making selected items by what is found in the hidden field.

    Code:
       
    <SELECT 
         NAME="rDEPT"
         id  ="rDEPT"
         multiple
         class="InputText"
         onChange="assembleDept(this);"
     >
        <option value="-1" SELECTED>Select Pay Type</option>
        <option value="A">Annual</option>
          <option value="B">Bi-Weekly</option>
           <option value="C">Contract</option>
         <option value="H">Hourly</option>
        <option value="P">Part-Time</option>
          <option value="S">Salaried</option>
    
    </select>
    
    
    function assembleDept(obj)
    {
    //need to alert if more than 5 items selected
        var cNewVal = ""
        var cCount = 0
        for(i=0;i<document.getElementById("rDEPT").options.length;i++)
        {
            if (document.getElementById("rDEPT").options[i].selected )
            {
                cCount += 1;
                if (cCount > 5)
                {
                    alert("you have selected more than 5 departments");
                }else{
                    cNewVal +=              document.getElementById("rDEPT").options[i].value.substring(0,6)+"~";
                }
            }
        }
    
        document.getElementById("REVIEWDEPT").value = cNewVal
    }
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    Originally posted by Claus Mygind
    ... however I cannot reverse the users selection of the last item in the select box as I cannot identify which of the items was the last ...
    but you write the actual value to cNewVal, thus cNewVal resembles the selection order (you could write the values to an array to have better access though)

    Comment

    • Claus Mygind
      Contributor
      • Mar 2008
      • 571

      #3
      Originally posted by Dormilich
      but you write the actual value to cNewVal, thus cNewVal resembles the selection order (you could write the values to an array to have better access though)
      Thank you for your quick response.

      While you were posting your reply that is exactly what I did (see my code below)

      However my question is still, "Can you detect which option the user selected or must you always cycle through the options array?".

      Note the array rDepartments is created and loaded at the time the page is served.
      Code:
      function assembleDept(obj)
      {
      //need to alert if more than 5 items selected
          var cNewVal = ""
          var cCount = 0
          for(i=0;i<document.getElementById("rDEPT").options.length;i++)
          {
              if (document.getElementById("rDEPT").options[i].selected )
              {
                  cCount += 1;
                  if (cCount > 5)
                  {
                      alert("you have selected more than 5 departments");
                      rePopulate();
                  }else{
                      cNewVal += document.getElementById("rDEPT").options[i].value.substring(0,6)+"~";
                  }
              }
          }
      
          document.getElementById("REVIEWDEPT").value = cNewVal
      }
      function rePopulate()
      {
          document.getElementById("rDEPT").options.length = 0
          for (var i = 0; i < rDepartments.length; i++ )
          {
              //get the stored array value        
              var cThisValue = rDepartments[i].substring(0,6)
              //test if this value is in the hidden field REVIEWDEPT
              var cIsSelected = ( document.getElementById("REVIEWDEPT").value.indexOf(cThisValue)!=-1 ) ? true : false ;
              //if the value is S for salaried the display text must be properly displayed
              if (cThisValue == "S")
              {
                  document.getElementById("rDEPT").options[i] = new Option("Salaried", rDepartments[i], cIsSelected, cIsSelected);
              }else{
                  document.getElementById("rDEPT").options[i] = new Option(rDepartments[i], rDepartments[i], cIsSelected, cIsSelected);
              }
          }
      }

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        Originally posted by Claus Mygind
        However my question is still, "Can you detect which option the user selected or must you always cycle through the options array?".
        right now you have to cycle to the options array unless you give every option an id and store that in the array (you might even write a class that does all the difficult stuff).

        Comment

        • Dormilich
          Recognized Expert Expert
          • Aug 2008
          • 8694

          #5
          just out of interest, does the field "REVIEWDEPT " is used for anything else than the immediate storage? is it used after form submission? if not, you can replace it with an object.

          Comment

          • Claus Mygind
            Contributor
            • Mar 2008
            • 571

            #6
            Yes ReviewDept is a data field in my table.

            Comment

            Working...