0

我有一个带有几个<select>列表的设置，允许您<options>根据选择的内容在 s 上执行各种功能。最初我在<select>s 上有一个 .change() 事件处理程序，它首先在列表中找到选定的元素并相应地更新我的控制按钮的状态。（某些功能对于列表中的某些项目应该不可用）。

但是，MSIE<=8 中 .change() 的奇怪行为导致我改为听箭头键按下和鼠标点击。我以为我快到了，但似乎所有版本的 MSIE 通过 v9 至少处理 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 回答