0

選択したものに応じて で<select>さまざまな機能を実行できるようにするいくつかのリストを備えたセットアップがあります。もともと、リスト内の選択された要素を最初に見つけて、それに応じてコントロールボタンの状態を更新する<options>.change() イベントハンドラーを s に配置していました。<select>(リスト内の特定のアイテムでは、特定の機能を使用できないはずです)。

ただし、MSIE<=8 の .change() の奇妙な動作により、代わりに矢印キーの押下とマウスのクリックをリッスンするようになりました。私はほとんどそこにいると思っていましたが、v9 までの MSIE のすべてのバージョンは、少なくとも mouseup() および click() イベントを他のすべてのブラウザーとは異なる方法で処理しているようです。

ここにフィドルがあります：http://jsfiddle.net/mjbmZ/4/

src を以下に再現します。

html:

<select id='select' size='10' multiple='multiple'>
    <option value='asdf'>Opt 1</option>
    <option value='asdf2'>Opt 2</option>
    <option value='asdf3'>Opt 3</option>
</select>

JavaScript:

var selectList = $("#select");

var getCurrent = function (e) {
    currentSelections = selectList.find(':selected');
    var vals = [];
    for (var x = 0; x < currentSelections.length; x += 1) {
        vals.push($(currentSelections[x]).html());
    }
    console.log(e, vals.join(', '));
}

selectList.click( function () {
    getCurrent('click: ');
});
selectList.mouseup( function () {
    getCurrent('mouseup: ');
});

上記のコードは、マウスでいずれかをクリックすると、選択したオプションのテキストをコンソールに記録します...またはそうするはずです。

MSIE で .mouseup() は、最後のクリックの前に選択されたものを報告します。他のすべての主要なブラウザーは正しく機能します。代わりに、それらすべてに .click() を使用しないのはなぜですか?

MSIE を除くすべてのブラウザで、複数のオプションを選択しているときにマウスを押したままにすると、.click() イベントはまったく発生しません。試してみてください: マウスを Opt1 の上に置いてクリックし、下にドラッグして別のオプションが強調表示されたら離します。いいえ .click() が発生しました!

とにかく、それが理にかなっていることを願っています。ブラウザ間の動作を正規化したいのですが、今のところ、次のいずれかを選択する必要があるようです。

1) .change() を使用します。これは、MSIE<9 でキーボードを介して選択されたオプションを登録していません。

また

2) .keyup() イベント + .click() または .mouseup() を使用します。どちらもブラウザ間で一貫して動作しません

誰にもアイデアはありますか？

[編集]

.keyup()、.mouseup()、および.click()イベントをすべて削除しました。この動作は、ブラウザ間で一貫性がありません。に戻しましたが.change()、次の点に注意してください。

その場合の機能検出を.addEvent行い、リスナーをアタッチし'onchange'ます。.change()これにより、次の場合に古いバージョンの MSIE でjQuery が起動しないという問題がすべて解決されます。

1) キーボードによる選択

2）クリックアンドドラッグで複数選択を行いました

ここに更新されたフィドルがあります: http://jsfiddle.net/mjbmZ/11/興味のある人のために。更新されたコードは次のように実装されます。

var selectList = $("#select");

var getCurrent = function (e) {
    currentSelections = selectList.find(':selected');
    var vals = [];
    for (var x = 0; x < currentSelections.length; x += 1) {
        vals.push($(currentSelections[x]).html());
    }
    console.log(e, vals.join(', '));
}


selectList.click( function () {
    getCurrent('click: ');
});
selectList.mouseup( function () {
    getCurrent('mouesup: ');
});
selectList.change( function () {
    getCurrent('change: ');
});
if (selectList[0].attachEvent) {
    selectList[0].attachEvent('onchange', function () {
        getCurrent('onchange: ');
    });
}

MSIE<9 でキーボードを使用して選択範囲を移動すると、「onchange」イベントのみが発生していることがわかります。

4

1 に答える 1

0

change() を試してみましたが、IE/Mozilla/Chrome で動作しています

var selectList = $("#select");

var getCurrent = function(e) {
    currentSelections = $("#select :selected");
 vals = [];
    for (var x = 0; x < currentSelections.length; x += 1) {
        vals.push($(currentSelections[x]).html());
    }
    console.log(e, vals.join(', '));
}


selectList.change(function() {
    getCurrent('click: ');
});

jsfiddle http://jsfiddle.net/mjbmZ/5/へのリンクは次のとおりです。

于 2012-05-23T20:16:12.563 に答える