ASP.NET MVC 多选列表框值未呈现

Posted 2023-05-07

【中文标题】ASP.NET MVC 多选列表框值未呈现

【英文标题】：ASP.NET MVC Multiple selection listbox values not rendering

【发布时间】：2017-12-28 16:40:13

【问题描述】：

我有 2 个单选下拉菜单和 1 个多选列表框。以下是 html 中的代码。我首先从第一个下拉列表中选择了值（单选）。根据其值加载第二个下拉值。然后我从第二个下拉列表中选择一个值。理想的情况是根据第二个下拉值第三个多选列表框应该加载值。我遇到过奇怪的行为。即使在 HTML 中选择显示选项值，但在渲染时显示没有结果。

 <div class="row sub-container">
            <div class="sub-heading">Filter supplier / service provider by categories</div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Categories Level 1</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        <div class="">
                            <div class="">
                                @Html.DropDownList("addServiceServiceCategoryLevel1", Model.ServiceCategoryList, "Please select a Category", new  @class = "form-control" )
                            </div>
                            
                        </div>
                    </section>
                </div>
            </div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Category Level2</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        <div class="">
                            @Html.DropDownList("addServiceServiceCategoryLevel2", new SelectList(string.Empty, "Id", "Name"), "Please select a Category", new  @class = "form-control" )
                        </div>
                    </section>
                </div>
            </div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Category</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        
                        <div class="fstElement fstMultipleMode fstNoneSelected">
                          

                            @Html.ListBox("addServiceServiceCategory",new SelectList(string.Empty, "Id", "Name"), new  @class = "multipleSelect", @multiple = "" )
                        </div>
                    </section>
                </div>
            </div>

 $(document).ready(function () 

               $('.multipleSelect').fastselect();


  $("#addServiceServiceCategoryLevel2").on("change", function ()   // whenever a selection is made
        $("#addServiceServiceCategory").empty();

        var id = $("#addServiceServiceCategoryLevel2").val();

        $.ajax(
            type: 'POST', // we are calling json method
            url: "/ServiceProviders/GetServiceCategoryLevel2",
            dataType: 'json',
            data:  id ,
            success: function (states) 

                $.each(states, function (i, state) 
                    $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' +
                        state.Text + '</option>');
                );
            ,
            error: function (ex) 
                alert('Failed to retrieve states.' + ex);
            
        );
        return false;
    );

);

【问题讨论】：

你在第三次多选中使用了任何 js 插件吗？

是的。快速选择dbrekalo.github.io/fastselect

你没有显示你是如何填充第三个多选的，但大概是使用 $.ajax - >尝试在 ajax 更新时使用你的 js 插件重新初始化你的第三个多选

@Alan Tsai，感谢您的反馈。我已经更新了相关代码..请检查

【参考方案1】：

我认为您的问题是因为您在 初始化为 fastselect

之后更新了选项

因此它没有接受新的变化

尝试重新初始化一次 ajax 成功加载数据

类似：

$.ajax(
    type: 'POST', // we are calling json method
    url: "/ServiceProviders/GetServiceCategoryLevel2",
    dataType: 'json',
    data:  id ,
    success: function (states) 

        $.each(states, function (i, state) 
            $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' +
                state.Text + '</option>');
        );

        // re initalize fastselect`
        $('.multipleSelect').fastselect();
    ,
    error: function (ex) 
        alert('Failed to retrieve states.' + ex);
    
);

【讨论】：

嗨艾伦，像上面的代码一样更改后，仍然显示没有结果。但在更改代码之前，最初我得到了下拉列表中的值。但是在更改代码之后，即使是第一次我也没有得到下拉列表中的值。它对我不起作用..

我可能必须在本地运行才能进行测试。但老实说，您是否考虑过使用其他插件？这似乎不是很活跃。 IHO 我会推荐 select2 select2.github.io/examples.html - 您可以通过不同的方式轻松实现您想要的，一种方法是使用本地数组，然后稍后使用 ajax 更新数组。更多信息结帐***.com/a/17348414/2564920

感谢@Alan.. 是的，它可能是插件中的错误.. 也会检查 Select2..

@AslamJiffry 我个人会做出改变。在 fastsearch （这是您使用的插件的基本插件）上看到一个问题，有人说无法动态添加选项 github.com/dbrekalo/fastsearch/issues/2 。我找不到如何销毁和重新初始化fastselect 所以我认为切换可能更容易