5

サイズ属性を持つ単純な選択ボックスがあり、その値が変更されたときに関数を呼び出したいと考えています。
そこで、select タグに onchange イベントを追加します。

<select onchange="alert(this.options[this.selectedIndex].value);" size="6" id="selecttest">
  <option value = "1">1</option>
  <option value = "2" selected>2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
  <option value = "9">9</option>
  <option value = "10">10</option>
  <option value = "11">11</option>
  <option value = "12">12</option>
</select>

http://jsfiddle.net/MGtJZ/2/を参照してください。

Windows 7 Pro の Chrome [バージョン 27.0.1453.94 m] (私のテストでは IE や Firefox ではありません) では、選択ボックスのスクロール バーをクリックするだけで値が変更されずに onchange イベントが発生します。

これは、純粋な JavaScript ( http://jsfiddle.net/MGtJZ/1/ )を使用する代わりに jQuery 変更イベントを登録した場合にも発生します。つまり、 onchange 属性を削除し、次のように変更イベント ハンドラーを登録します。 

$(function () {
  $('#selecttest').change(function () {
    alert($(this).val());
  });
});

これは私が期待すべきことですか？

注: これは、最初にスクロール バーまたは矢印をクリックした場合にのみ発生します。選択した値または別の値をクリックしてからスクロール バー/矢印をクリックすると、この動作が停止します。

4

2 に答える 2

0

私のChromiumのインストールでは、それは起こりません。ただし、これはバグであり、予期されるべきではないと確信しています。ただし、回避策は非常に簡単です。

$(function () {
    var lastVal;
    $('#selecttest').change(function () {
        var v = $(this).val();
        if (v != lastVal) {
            fireYourRealOnChangeEventHere();

            lastVal = v;
        }
    });
});
于 2013-05-31T23:20:32.740 に答える