Question

我在HTML中有一个简单的选择表单，包含一些项目。我正在使用javascript来限制用户可以选择的项目数。

在HTML中我有以下代码：

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

我将三个变量传递给javascript函数checkMaxSelected：

选择表格（即此）
用户可以在表单中执行的最大选择数（在我的情况下，3）
应在警告框中显示的错误消息。

JS代码如下：

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--;
     }
  }
};

此解决方案在Firefox，Safari和IE 下完美运行，但不适用于Chrome 。为什么呢？

非常感谢任何帮助。提前谢谢。

额外信息：

我一直试图使用firebug为firefox和Chrome调试它：使用Firefox时，当我选择select表单的第一项时，我看到这是firebug控制台：

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

（这是正确的）。

与Chrome相同的操作（即选择第一项）会直接触发错误消息。以下是Chrome中的firebug控制台输出：

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

要使您的代码在Chrome和其他浏览器中的工作方式相同，您需要将 select.selectedOptions 属性重命名为其他内容。

SELECT标记有selectedOptions attribute，只有Chrome才能正确显示，所以当其他浏览器将该属性作为您自己创建的数字属性时，对于Chrome，它实际上是您选择的选项元素集合，即你的if (select.selectedOptions < maxSelected)陈述失败的原因。

这是您修复的Javascript函数：

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--;
        }
    }
}

使用Javascript选择表单中的最大选择数

1 个答案: