Question

所有

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

在每一行上，我有两个<select>元素;每个包含10-30 <option>个元素。

如果我要在每行<option>上包含所有<select>元素，我最终可能会有超过6,000个元素（100行x 2选择x 30个选项）。

所以，我的计划是将每个选项限制为单个选项（选定的选项）。然后，当用户点击选择时，我会使用JavaScript / jQuery来填充选项。

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

重要的是，我正在触发JavaScript函数，该函数会在focus事件中添加选项。

在Chrome和Firefox中 - 效果很好。

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

然而，在IE中 - 它无法正常工作。最初，当您单击选择 - 而不是显示菜单 - 它只是集中在选择内部。如果单击选择再次，则会显示菜单。我猜测这是因为IE尝试显示菜单 BEFORE 触发focus事件。

底线 - 这是不可接受的，因为您需要点击选择两次才能显示选项菜单。

在iOS上的Safari中，它也无法正常有时。（也许是因为在建立菜单和解雇焦点事件之间存在竞争条件......）

我已尝试将我的逻辑移至mousedown事件，但这似乎会导致更多问题，因为moused不仅在您单击select时被触发，而且当您单击任何选项时也会触发

我猜这种方法（在你需要时为选择添加选项）已经成功实现了数千次;我只是需要一些关于如何正确完成它的建议。

提前致谢！

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/

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

1 个答案: