Question

想法是你选择ddlMoo并触发ajax函数并绑定ddlFoo。这一直有效，直到我添加了现在选择的select-select功能，select并不绑定自己的列表。下拉列表仍然很好但不可回收。

    <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可以获取所有条目并填充然后填充到下拉列表中之前，选择在完成之前被调用并且它将显示空列表。你有2个选择，要么在success回调中选择了呼叫，要么你想要保留当前选择的呼叫，那么你必须通过调用chosen回调通知updated你已经更新了列表方法。我将使用调用chosen列表更新方法的方法，在成功方法中添加此调用 -

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");
        }
    });
}

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

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

选择两个下拉列表选择

1 个答案: