Question

这个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>

Answer 1

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

使用直播 ..它可能有用。

Answer 2

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

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

Answer 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>

删除选择中的选项，结果不显示在IE上

3 个答案: