javascript - 在用户打开它之前动态地将 <options> 添加到 <select> 元素

Question

全部，

我正在开发一个网络应用程序。其中一个关键屏幕包含一个相当大的表格 - 通常在 50-100 行之间。

在每一行，我有两个 <select>要素；每个包含 10-30 <option> 的任何地方元素。

如果我要包括所有 <option>每个 <select> 上的元素在每一行上，我最终可能会得到超过 6,000 个元素(100 行 x 2 个选择 x 30 个选项)。

因此，我的计划是将每个选择限制为单个选项(所选选项)。然后，当用户单击选择时，我会使用 JavaScript/jQuery 来填充选项。

然后，在用户关闭选择后，我将删除除所选选项之外的所有选项。

重要的是，我触发了在 focus 上添加选项的 JavaScript 函数事件。

在 Chrome 和 Firefox 中 - 这很好用。

我设置了一个 jsFiddle 来演示:http://jsfiddle.net/j2zfD/

但是，在 IE 中 - 它不能正常工作。最初，当您单击选择时 - 而不是显示菜单 - 它只是聚焦在选择内。如果您再次单击选择，则会显示菜单。我猜测那是因为 IE 试图在 BEFORE 触发 focus 时显示菜单事件。

底线 - 这是 Not Acceptable ，因为您需要点击选择两次以显示选项菜单。

在 iOS 上的 Safari 中，它也有时不能正常工作。 (可能是因为在构建菜单和触发焦点事件之间存在竞争条件...)

我已经尝试将我的逻辑移动到 mousedown事件，但这似乎会导致更多问题，因为 mousedown 不仅会在您单击选择时触发，还会在您单击任何选项时触发。

我猜这种方法(在需要时向选择添加选项)已经成功实现了数千次；我只需要一些关于如何正确执行此操作的建议。

提前致谢!

Answer 1

试试这个:

HTML

<select class="sel">
    <option value="a">Option A</option>
</select>

jQuery

jQuery(document).ready(function($){
    var option={
        "a":"option a",
        "b":"option b",
        "c":"option c"
    };
    $('.sel').on('click',function(){
        $('.sel').html('');
       $.each(option,function(i,n){
          $('.sel').append('<option value='+i+'>'+n+'</option>');
        });

    });
    $('.sel').on('change',function(){
        var selected_val=$(this).val();
        var selected_option=$("option:selected",this).text();
        $('.sel').html('');

          $('.sel').append('<option value='+selected_val+'>'+selected_option+'</option>');

    });

});

这是演示:http://jsfiddle.net/mHGQs/