如何消除 Internet Explorer 9 中 select 多个列表中所有选项的缓慢滚动

Question

我需要提供一个按钮以允许用户select select 多个列表框中的所有选项。

我正在使用 jQuery 到 select 选项。

在 Internet Explorer 9 中，单击按钮后，浏览器会在所有选项中显示慢速滚动效果。

示例代码和慢速滚动条在http://jsfiddle.net/willdurman/4b7avgmm/12/

此效果在最新的 Firefox 或 Chrome 中不存在。

如何消除这种慢速滚动影响？

要求最初向用户显示没有选项的列表框 selected，然后可以 select 单个选项或所有选项。

// Abbreviated list of 10 options
<select id="lb" multiple="multiple">  
    <option value="0">item number 0</option>
    <option value="1">item number 1</option>
    <option value="2">item number 2</option>
    <option value="3">item number 3</option>
    <option value="4">item number 4</option>
    <option value="5">item number 5</option>
    <option value="6">item number 6</option>
    <option value="7">item number 7</option>
    <option value="8">item number 8</option>
    <option value="9">item number 9</option>
</select>
<input type='button' id='selectAll' value ='Select All'/>

    // jQuery to select all options
    $(document).ready(function() { 
            $('#selectAll').click(function(e) {
                    $("#lb option").prop("selected",true);
            });
    });

Answer 1

我发现虽然滚动效果在更新、更快的机器上不太明显，但它仍然存在。

经过大量搜索，我发现了这个 Stack Overflow 问题 Dynamically select all items in a Multi-Select listbox using jquery。我调整了代码以与我的示例代码一起使用：

var selectAllButton = document.getElementById('selectAll');
var listbox = document.getElementById('lb');

$(selectAllButton).click(function() { 
    selectAllOptions(listbox);
});

function selectAllOptions(listbox) {
var select = $(listbox);    
var clone = select.clone();
    $('option', clone).attr('selected', true);
    var html = clone.html();
    select.html(html);
}

这是更新后的 JSFiddle http://jsfiddle.net/willdurman/4b7avgmm/19/。此方法不会导致 Internet Explorer 9 中的滚动。

Answer 2

我的最终实现要简单得多。我只是用 jQuery hide/show.

包装选择过程

 $(document).ready(function() { 
      $('#selectAll').click(function(e) {
           $('#lb').hide();
           $("#lb option").prop("selected",true);
           $('#lb').show();
      });
 });

JSFiddle：http://jsfiddle.net/4b7avgmm/17/

如何消除 Internet Explorer 9 中 select 多个列表中所有选项的缓慢滚动

How to eliminate slow scroll through all options in select multiple list in Internet Explorer 9

html

jquery

internet-explorer

internet-explorer-9