c# - 选择带有两个下拉列表的选择

Question

想法是，您选择ddlMoo，它会触发ajax函数并绑定(bind)ddlFoo。 这一直有效，直到我添加了选择选择功能，现在选择的选择不会绑定(bind)他自己的列表。下拉列表仍然可以，但无法选择。

    <div id="divMoo" runat="server">
            <asp:DropDownList ID="ddlMoo" runat="server" Width="300px" class="chosen-select">
            </asp:DropDownList>
    </div>
    <div id="divFoo" runat="server" style="display: none;">
            <asp:DropDownList ID="ddlFoo" runat="server" Width="300px" class="chosen-select">
            </asp:DropDownList>
    </div>


<script>
    jQuery(function ($) {
        ChosenSelect();
    });

    function ChosenSelect() {
        $('.chosen-select').chosen({ allow_single_deselect: true });
        //resize the chosen on window resize
        $(window).on('resize.chosen', function () {
            var w = $('.chosen-select').parent().width();
            $('.chosen-select').next().css({ 'width': w });
        }).trigger('resize.chosen');
    }

    $('#<%= ddlMoo.ClientID %>').on('change', function () {
        FooList(this.value);
        ChosenSelect();
    });

    function FooList(MooId) {
        $.ajax({
            type: "POST",
            url: "Foo.aspx/Foo",
            data: "{ 'MooId': '" + MooId+ "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                $("#<%= divFoo.ClientID %>").show();

                if (data.d.length > 1)
                    $("#<%= ddlFoo.ClientID %>").html($('<option></option>').val("").html("Choose.."))

                for (var i = 0; i < data.d.length; i++) {
                    $("#<%= ddlFoo.ClientID %>").append($('<option></option>').val(data.d[i].FooId).html(data.d[i].FooName));
                }

                if (data.d.length == 1)
                    $("#<%= ddlFoo.ClientID %>").change();
            }
        });
    }

Answer 1

这是因为您选择的调用在找到任何元素之前就完成了，而且还有很多地方可以改进您的代码 -

一个代码放置错误

第一个选择的调用没问题，但为什么其他代码在 document.ready 之外？你应该将它们保存在 document.ready -

中

jQuery(function ($) {
    ChosenSelect();

    function ChosenSelect() {
        $('.chosen-select').chosen({ allow_single_deselect: true });
        //resize the chosen on window resize
        $(window).on('resize.chosen', function () {
            var w = $('.chosen-select').parent().width();
            $('.chosen-select').next().css({ 'width': w });
        }).trigger('resize.chosen');
    }

    $('#<%= ddlMoo.ClientID %>').on('change', function () {
        FooList(this.value);
        ChosenSelect();
    });

    .......
});

两个第二次调用不正确以及选择的原因无法看到列表中的项目 -

$('#<%= ddlMoo.ClientID %>').on('change', function () {
    FooList(this.value);
    ChosenSelect();
});

为什么？因为 FooList 是一个 ajax 调用，并且执行不会停止。因此，在 ajax 可以获取所有条目并填充下拉列表之前，在完成之前调用 selected 并将显示空列表。您有 2 个选择，要么在 success 回调中调用 selected，或者如果您想保留当前选择的调用，则必须通过调用通知 chosen 您已更新列表更新了回调方法。我将选择调用 chosen 列表更新方法的方法，将此调用添加到 success 方法中 -

function FooList(MooId) {
    $.ajax({
        type: "POST",
        url: "Foo.aspx/Foo",
        data: "{ 'MooId': '" + MooId+ "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {

            $("#<%= divFoo.ClientID %>").show();

            if (data.d.length > 1)
                $("#<%= ddlFoo.ClientID %>").html($('<option></option>').val("").html("Choose.."))

            for (var i = 0; i < data.d.length; i++) {
                $("#<%= ddlFoo.ClientID %>").append($('<option></option>').val(data.d[i].FooId).html(data.d[i].FooName));
            }

            if (data.d.length == 1)
                $("#<%= ddlFoo.ClientID %>").change();


           //update chosen list 
           $("#<%= ddlFoo.ClientID %>").trigger("chosen:updated");
        }
    });
}

但请记住，在旧版本的 selected 中，该事件称为 liszt:updated，而在较新的版本中，该事件称为 chosen:updated。根据需要进行更改

三我真的不明白为什么你要使用服务器端div和runat='server'。这是一个非常糟糕的主意，而且完全没有必要。您只是过度填充了 View 状态并使 asp.net 做了更多的工作，而这些工作实际上是不需要做的。