Question

我有一个asp.net下拉列表和一个html按钮。点击按钮（此处命名为克隆），我应该根据以下场景生成一个下拉列表。

我从一个下拉列表开始（有5个选项）=＆gt; 1,2,3,4,5 - ＆gt;默认选择第一个选项。我点击克隆按钮。
我选择选项5（在选择列表＃2中，即第一次点击按钮后生成的下拉列表。）
我再次点击了克隆 - ＆gt;新列表（＃3）添加了ONLY选项2,3,4
我选择选项2（在选择列表＃3中）
我点击克隆 - ＆gt;使用选项3,4
..等等。

我想在达到最新的下拉列表时禁用以前的所有下拉列表实例（ddlCityName）。

例如：

一旦我进入下拉列表＃2，我需要禁用下拉列表＃1
对于下拉列表＃3，我需要下拉列表＃1和下拉列表＃2禁用
依旧......

这是现有的动态创建下拉列表的代码：

<body>
<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Category:</td>
                <td>
                    <asp:DropDownList ID="ddlCityName" runat="server" DataTextField="City" DataValueField="City" class="ddlClone"></asp:DropDownList>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="button" id="btnClone" value="Add" />
                </td>
            </tr>
        </table>
    </div>
    <div id="target">
        <br />
        <br />
    </div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $('#btnClone').click(function () {
        //$('#ddlCityName').append('<option selected="ddlClone" value="0">Select City</option>');
        var original = $('select.ddlClone:eq(0)');
        var allSelects = $('select.ddlClone');
        var clone = original.clone();

        $('option', clone).filter(function (i) {
            return allSelects.find('option:selected[value="' + $(this).val() + '"]').length;
        }).remove();
        $('#target').append($('<span>').text('Category: '));
        $('#target').append(clone).append('<br /><br /><br />');
    });
</script>

请分享您的想法！

Answer 1

document.getElementById("ddlCityName").setAttribute("disabled", "true");

Answer 2

在btnClone点击功能结束时附加以下代码。

$('.ddlClone').attr('disabled', false);
$('.ddlClone:not(:last)').attr("disabled", true);

克隆下拉列表后，禁用上一个下拉列表

2 个答案: