468,139 Members | 1,455 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,139 developers. It's quick & easy.

Identify last selection made on list box

Claus Mygind
571 512MB
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <SELECT 
  3.      NAME="rDEPT"
  4.      id  ="rDEPT"
  5.      multiple
  6.      class="InputText"
  7.      onChange="assembleDept(this);"
  8.  >
  9.     <option value="-1" SELECTED>Select Pay Type</option>
  10.     <option value="A">Annual</option>
  11.       <option value="B">Bi-Weekly</option>
  12.        <option value="C">Contract</option>
  13.      <option value="H">Hourly</option>
  14.     <option value="P">Part-Time</option>
  15.       <option value="S">Salaried</option>
  16.  
  17. </select>
  18.  
  19.  
  20. function assembleDept(obj)
  21. {
  22. //need to alert if more than 5 items selected
  23.     var cNewVal = ""
  24.     var cCount = 0
  25.     for(i=0;i<document.getElementById("rDEPT").options.length;i++)
  26.     {
  27.         if (document.getElementById("rDEPT").options[i].selected )
  28.         {
  29.             cCount += 1;
  30.             if (cCount > 5)
  31.             {
  32.                 alert("you have selected more than 5 departments");
  33.             }else{
  34.                 cNewVal +=              document.getElementById("rDEPT").options[i].value.substring(0,6)+"~";
  35.             }
  36.         }
  37.     }
  38.  
  39.     document.getElementById("REVIEWDEPT").value = cNewVal
  40. }
  41.  
  42.  
Jan 16 '09 #1
5 2656
Dormilich
8,651 Expert Mod 8TB
@Claus Mygind
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)
Jan 16 '09 #2
Claus Mygind
571 512MB
@Dormilich
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.
Expand|Select|Wrap|Line Numbers
  1. function assembleDept(obj)
  2. {
  3. //need to alert if more than 5 items selected
  4.     var cNewVal = ""
  5.     var cCount = 0
  6.     for(i=0;i<document.getElementById("rDEPT").options.length;i++)
  7.     {
  8.         if (document.getElementById("rDEPT").options[i].selected )
  9.         {
  10.             cCount += 1;
  11.             if (cCount > 5)
  12.             {
  13.                 alert("you have selected more than 5 departments");
  14.                 rePopulate();
  15.             }else{
  16.                 cNewVal += document.getElementById("rDEPT").options[i].value.substring(0,6)+"~";
  17.             }
  18.         }
  19.     }
  20.  
  21.     document.getElementById("REVIEWDEPT").value = cNewVal
  22. }
  23. function rePopulate()
  24. {
  25.     document.getElementById("rDEPT").options.length = 0
  26.     for (var i = 0; i < rDepartments.length; i++ )
  27.     {
  28.         //get the stored array value        
  29.         var cThisValue = rDepartments[i].substring(0,6)
  30.         //test if this value is in the hidden field REVIEWDEPT
  31.         var cIsSelected = ( document.getElementById("REVIEWDEPT").value.indexOf(cThisValue)!=-1 ) ? true : false ;
  32.         //if the value is S for salaried the display text must be properly displayed
  33.         if (cThisValue == "S")
  34.         {
  35.             document.getElementById("rDEPT").options[i] = new Option("Salaried", rDepartments[i], cIsSelected, cIsSelected);
  36.         }else{
  37.             document.getElementById("rDEPT").options[i] = new Option(rDepartments[i], rDepartments[i], cIsSelected, cIsSelected);
  38.         }
  39.     }
  40. }
  41.  
Jan 16 '09 #3
Dormilich
8,651 Expert Mod 8TB
@Claus Mygind
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).
Jan 16 '09 #4
Dormilich
8,651 Expert Mod 8TB
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.
Jan 17 '09 #5
Claus Mygind
571 512MB
Yes ReviewDept is a data field in my table.
Jan 22 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by srampally | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.