2

いくつかの項目を含む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>

3つの変数をjavascript関数checkMaxSelectedに渡します。

  1. フォームを選択する（つまりこれ）
  2. ユーザーがフォームで実行できる選択の最大数（私の場合は3）
  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では機能しません。なんで？

どんな助けでも大歓迎です。前もって感謝します。

追加情報：

私はfirefoxとChromeの両方でfirebugを使用してデバッグしようとして無駄にしています。Firefoxでは、選択フォームの最初の項目を選択すると、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
4

1 に答える 1

4

Chromeと他のブラウザでコードを同じように機能させるには、select.selectedOptionsプロパティの名前を別の名前に変更する必要があります。

SELECTタグには、Chromeのみが正しく取得しているselectedOptions属性があり、表示されるため、他のブラウザはそのプロパティを独自に作成した数値プロパティとして受け取りますが、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--;
        }
    }
}
于 2012-11-20T15:03:48.783 に答える