添加<选项>到<选择>在用户打开元素之前动态地打开它

Adding <options> to a <select> element dynamically just before the user opens it

本文关键字：gt lt 动态 元素 选项 选择 添加 用户      更新时间：2023-09-26

全部，

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

在每一行上，我都有两个<select>元素；每个包含10-30个CCD_ 2元素。

如果我在每行的每个<select>上包括所有<option>元素，那么我最终可能会有6000多个元素(100行x2选择x 30个选项(。

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

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

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

在Chrome和Firefox中，这非常有效。

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

然而，在IE中，它不能正常工作。最初，当您单击选择(而不是显示菜单(时，它只是将焦点集中在选择内部。如果再次单击"选择"，则会显示菜单。我猜这是因为IE试图在触发focus事件之前显示菜单。

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

它也不能正常工作有时在iOS上的Safari中。(也许是因为在构建菜单和启动焦点事件之间存在竞争条件…(

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

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

提前感谢！

试试这个：

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/

相关文章：