Question

I have a simple select form in HTML with some items. I’m using javascript to limit the number of items the user can select.

In the HTML I have the following code:

<select name="category" multiple id="category" onchange="checkMaxSelected(this, 3, 'Max number of categories you can select: ');">
    <option value="orange">orange</option>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="pear">pear</option>
    <option value="strawberry">strawberry</option>
    </select>

I pass three variables to the javascript function checkMaxSelected:

1. which select form (i.e. this)
2. the max number of selections the user can perform in the form (in my case, 3)
3. the error message that should be displayed in an alert box.

The JS code is the following:

function checkMaxSelected (select, maxSelected, displ_error_nummaxcat) {
  if (!select.storeSelections) {
   select.storeSelections = new Array(select.options.length);
   select.selectedOptions = 0;
   }

   for (var i = 0; i < select.options.length; i++) {

  console.log('select.options[i].selected: '+select.options[i].selected+' select.storeSelections[i]: '+select.storeSelections[i]);

     if (select.options[i].selected && 
         !select.storeSelections[i]) {
       if (select.selectedOptions < maxSelected) {
         select.storeSelections[i] = true;
         select.selectedOptions++;
       }
      else {
        alert(displ_error_nummaxcat + maxSelected);
        console.log('HERE I SHOW ALERT!');
    select.options[i].selected = false; 
      }
    }
     else if (!select.options[i].selected &&
       select.storeSelections[i]) {
       select.storeSelections[i] = false;
       select.selectedOptions--;
     }
  }
};

This solution works perfectly under Firefox, Safari and IE, however it doesn’t work with Chrome. Why?

Any help is greatly appreciated. Thank you in advance.

Extra info:

I’ve been trying in vain to debug it using firebug both for firefox and Chrome: with Firefox when I select the first item of the select form I see this the firebug console:

select.options[i].selected: true select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined

(Which is correct).

The same action with Chrome (i.e. selecting the first item) triggers directly the error message. Here is the firebug console output in Chrome:

select.options[i].selected: true select.storeSelections[i]: undefined
HERE I SHOW ALERT!
select.options[i].selected: false
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined
select.options[i].selected: false select.storeSelections[i]: undefined

Answer 1

To make your code work the same in Chrome as well as the other browsers, you need to rename your select.selectedOptions property to something else.

The SELECT tag has a selectedOptions attribute that only Chrome is getting correctly, it appears, so while the other browsers take that property as your own created numeric property, for Chrome it is actually your selected option elements collection, that’s why your if (select.selectedOptions < maxSelected) statement is failing.

Here’s your fixed Javascript function:

function checkMaxSelected (select, maxSelected, displ_error_nummaxcat) {
    if (!select.storeSelections) {
        select.storeSelections = new Array(select.options.length);
        select.optionsSelected = 0;
    }

    for (var i = 0; i < select.options.length; i++) {
        console.log('select.options[i].selected: '+select.options[i].selected+' select.storeSelections[i]: '+select.storeSelections[i]);
        if (select.options[i].selected && !select.storeSelections[i]) {
            if (select.optionsSelected < maxSelected) {
                select.storeSelections[i] = true;
                select.optionsSelected++;
            }
            else {
                alert(displ_error_nummaxcat + maxSelected);
                console.log('HERE I SHOW ALERT!');
                select.options[i].selected = false;
            }
        }
        else if (!select.options[i].selected && select.storeSelections[i]) {
            select.storeSelections[i] = false;
            select.optionsSelected--;
        }
    }
}