删除select中的一个选项，结果在IE上不显示答案

【问题标题】：delete a option in select, the result do not show on IE删除select中的一个选项，结果在IE上不显示
【发布时间】：2012-05-05 01:19:10
【问题描述】：

这个 html 完全可以在 chrome 中运行，但不能在 IE 中运行

文件很简单，只有两个功能

1：点击添加按钮，第一行将被克隆并放在添加按钮之前

2：点击组合框，第二个选项将被删除。

现在问题是函数 2

1 .在 IE 中，加载此页面，然后单击添加按钮添加一些组合框

2 。单击第一个组合框，您将不会在组合框中看到第二个选项（这是正确的结果）

3 .单击第二个组合框或其他克隆的组合框，然后您会看到第二个选项仍在组合框中，因此它没有被删除。（这不是正确的结果）

4 。如果你在开发者工具中看到源代码，你可以看到第二个选项被移除了。

那么，如何去掉 IE 中的选项？

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready
(
    function()
    {
        $('#add').click(function(){
                        $(this).parent().parent().before($('tr').eq(0).clone(true));
        });
        $('select').focus(function(){
                        $(this).find('option').eq(1).remove();
        });
    }
);
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <select>
                <option>1</option><option>2</option><option>3</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input id="add" type="button" value="add"/></td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

您的代码似乎在使用和不使用 .live() 的情况下都可以正常工作（即使根据我的说法，如果没有 live，它也不应该工作）。如果您执行一些操作并检查源，那么一切都会按计划进行。 IE 似乎并没有更新它的复选框内容，我不知道为什么会这样。 :(也许如果你告诉我们你为什么这样做，我们可以找出一个 IE 友好的解决方案？:)
我试过 .live() 和 .live()，live 是工作，on 是不工作，所以看来 .on() 不能 100% 替代 .live()。但我仍然想知道为什么 .on() 和 .focus() 在 IE 中不起作用（在 IE8 和 9 中测试），因为 .live() 有性能问题，如果我最终找不到原因，那么我会使用 .居住（）。我这样做是因为我让用户动态添加组合框列表，然后选择该选项。但是如果之前选择过，则不允许选择相同的选项，所以我需要搜索所有选项，如果选择，请删除该选项。

标签： javascript jquery internet-explorer select option

【解决方案1】：

第一个有效，因为事件处理程序附加到此时 DOM 中唯一的“选择”。然后，当您单击“添加”时，会向 DOM 添加一个新的“选择”元素，但该元素没有附加任何事件处理程序。我可能误解了你的问题，如果是这样，请告诉我。

如果您提供明确的规格，我可以写一个简短的示例来说明如何完成。

【讨论】：

我使用 .clone(true) 复制 DOM，true 表示使用事件处理程序克隆 DOM。我已经更改了代码，因此即使您单击其他克隆的选择，您也会看到警报窗口，并且 $(this).html() 让您看到选择中的更改。 $('select').focus(function(){ alert($(this).html()); $(this).find('option').eq(1).remove(); alert($(this).html()); });

【解决方案2】：

        $('select').live('focus',function(){
        $(this).find('option').eq(1).remove();
        });

使用 live.. 它可能会起作用。

【讨论】：

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。
感谢@RASG 提供的信息，其他人可以在这里查看有关“on”What's the difference between jQuery .live() and .on()

【解决方案3】：

对我来说效果很好。
这就是我改变的：

<script type="text/javascript">
    $(window).load(function(){
        $('#add').on('click', function(){
            $(this).parent().parent().before($('tr').eq(0).clone(true));
        });

        $('select').on('focus', function(){
            $(this).find('option').eq(1).remove();
        });
    });
</script>

这是完整的页面，带有更“标准”的代码

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $('#add').on('click', function(){
                $('#formclone').append($('.myselect').eq(0).clone(true));
            });

            $('select').on('focus', function(){
                $(this).find('option').eq(1).remove();
            });
        });
    </script>
</head>

<body>
<div id="divform">
    <form class="myform">
        <select class="myselect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <input id="add" type="button" value="add">
    </form>
</div>
<p>
    <div id="divclone">
        clones: 
        <form id="formclone"></form>
    </div>
</p>
</body>

</html>

【讨论】：