选择选择与两个下拉列表

本文关键字：选择 两个 下拉列表 | 更新日期: 2023-09-27 18:13:49

想法是，您选择ddlMoo，它触发ajax函数并绑定ddlFoo。这是工作，直到我添加了selected -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();
            }
        });
    }

选择选择与两个下拉列表

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

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();
    });
    .......
});

Two第二次调用是不正确的，这是为什么被选中的列表中看不到项目的原因- 

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

为什么?因为FooList是一个ajax调用和执行不停止那里。因此，在ajax能够获取所有条目并将它们填充到下拉列表中之前，在完成之前调用chosen，它将显示空列表。你有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");
        }
    });
}

但是记住，在旧版本的chosen事件被称为liszt:updated，而在新版本中，它被称为chosen:updated。必要时进行更改

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

相关文章：