Select... tag

tarrike used Ask the Experts™
I have a select tag with more than 200 options.  I allow the user to select multiple options, but I want to limit them to 8.  Is there any code samples to do this?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013

You could eliminate some of the options after they select them, but there is no way to limit the number they can select.

Add a onchange function to the select. This function should count the number of options that are selected, and alert the user if they have selected more than the desired number, also unselecting the last item selected.

Of course you'll need to store the indexes of the last set of selected items so that you can revert back to this if they select more than the max.

Or perhaps return false if the select more than the max?
<script language="JavaScript">
     function getSelected(SelectToGet)
          var returnArray = new Array();
          for (var optionIndex=0; optionIndex<SelectToGet.options.length; optionIndex++)
               if (SelectToGet.options[optionIndex].selected)
                    { returnArray[returnArray.length] = optionIndex; }
          return returnArray;
     function selectOptions(selectObj,optionArray,clearSelect)
          if ( (clearSelect != null) && (clearSelect) )
               { selectObj.selectedIndex = -1; }
          for (var optionIndex=0; optionIndex<optionArray.length; optionIndex++)
               { selectObj.options[optionArray[optionIndex]].selected = true; }
          return true;
     function checkMaxOptions(selectObj,maxOptions)
          if ( eval("typeof(" + + "_lastSelectedArray) == 'undefined'") )
               { eval("_lastSelectedArray = new Array()"); }
          currentSelectedArray = getSelected(selectObj);
          if (currentSelectedArray.length > maxOptions)
               alert("You can only select " + maxOptions + " options");
               selectOptions(selectObj, eval("_lastSelectedArray"), true);
               return false;
               eval("_lastSelectedArray = currentSelectedArray");
               return true;

<form name="testForm">

     <select multiple name="testSelect" onchange="checkMaxOptions(this,3)" size="5">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
          <option value="7">Seven</option>
          <option value="8">Eight</option>
          <option value="9">Nine</option>
          <option value="10">Ten</option>
          <option value="11">Eleven</option>
          <option value="12">Twelve</option>
          <option value="13">Thirteen</option>
          <option value="14">Fourteen</option>
          <option value="15">Fifteen</option>



Issues with this script are that if you select more than you were allowed, it will revert back to the previous selection not taking in any of the last selections you made. Meaning if the max is 5 options, you initally select 3, then go to select 3 more, it won't leave 5 options selected, but the original 3.

This could be overcome by modifying the selectOptions function to go through all of the options in the select, confirming that all of the previous options are selected.

When it encounters an option that is selected, but wasn't in the previous selection, you would add this to the array and increase the length until it reached the maximum allowed. Then, all subsequent options that were selected would be ignored and unselected.

Let me know if you have any trouble with this script.


Thanks!  That worked perfectly

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial