Javascript 添加<；选项>；到a<；选择>；元素在用户打开它之前进行动态更新

全部,

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

在每一行中，我有两个

元素；每个包含10-30个

元素

如果我在每一行的每一个

上都包含所有

元素，那么我最终可能会有6000多个元素（100行x 2选择x 30选项）

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

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

重要的是，我正在触发JavaScript函数，该函数在

focus

事件中添加选项

在Chrome和Firefox中，这非常有效

我已经设置了一个JSFIDLE来演示：

然而，在IE中，它不能正常工作。最初，当您单击“选择”按钮时—而不是显示菜单—它只是在“选择”按钮内聚焦。如果再次单击“选择”，则会显示菜单。我猜测这是因为IE试图在触发

焦点事件之前显示菜单

底线-这是不可接受的，因为您需要单击选择按钮两次以显示选项菜单

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

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

我猜这种方法（在需要时向select添加选项）已经成功实现了数千次；我只是需要一点关于如何正确做的建议

提前谢谢
 试试这个：

HTML

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


方案A

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>');

    });

});

jQuery（文档）.ready（函数（$）{
var期权={
“a”：“选项a”，
“b”：“选项b”，
“c”：“选项c”
};
$（'.sel'）。在（'click'，function（）上{
$（'.sel'）.html（''）；
$。每个（选项、功能（i、n）{
$（'.sel'）。追加（''+n+''）；
});
});
$（'.sel'）。在（'change'，function（）上{
var selected_val=$（this.val（）；
var selected_option=$（“option:selected”，this）.text（）；
$（'.sel'）.html（''）；
$（'.sel'）。追加（''+所选选项+''）；
});
});

这是演示：
我想知道您是否可以根据屏幕上显示的行来满足和处理人口。滚动视口时，从不再可见的中删除。为了提高效率，您可以简单地分离它们并将它们移动到新的父级。特别是在移动设备上，这意味着一次屏幕上只有几个。另一个选项是当鼠标进入的父元素时填充它们。例如，如果它是一个表，将其设置为在tr:hover上填充。为什么不对整个页面使用一个
select
，并按行显示它needed@charlietfl-我想做那样的事。您将如何实施它？（例如，您需要一些用户可以单击以知道何时显示
选择
…）我自己可能已经能够解决这个问题-通过使用“focusin”事件而不是“focus”-它现在似乎可以在所有桌面浏览器（Chrome、Firefox、IE8+）上正常工作。而且，我在移动设备上使用“touchstart”而不是“focusin”（使用Modernizer检测触摸功能）。总而言之，似乎有效。使用鼠标悬停在正确的位置显示select Peeyus-感谢您的建议。它实际上和我的非常相似，只是它的效果稍差一点（至少在Chrome和IE上）。我认为，问题是您正在
单击
上构建菜单，这太晚了。我正在使用
focus
，它发生在
单击之前，甚至在IE上也似乎为时已晚。