无法在选择 0.9.12 的 asp mvc 4 中刷新下拉列表答案

【问题标题】：Can't refresh dropdownlist in asp mvc 4 with chosen 0.9.12无法在选择 0.9.12 的 asp mvc 4 中刷新下拉列表
【发布时间】：2014-05-15 17:04:04
【问题描述】：

我有几个使用 Html.DropDownListFor 创建的下拉列表，例如：

<div class="control-group">
  <label class="control-label" for="inputPropertySurname">
   City
   <span class="form-required" title="This field is required.">*</span>
  </label>
  <div class="controls">
   @*<input type="text" id="inputPropertySurname">*@
   @Html.DropDownListFor(m => m.CityId, vmpa.Cities)
  </div>
 <!-- /.controls -->
</div>

但它总是在选择框之后创建一个 div 区域

<div id="CityId_chzn" class="chzn-containerchzn-container-single 
 chzn-container-single-nosearch" style="width: 220px;" title="">
   <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
    <span>Hà Nội</span>
    <div><b></b></div>
   </a>
   <div class="chzn-drop" style="left: -9000px;">
    <div class="chzn-search"><input type="text" autocomplete="off">
    </div>
    <ul class="chzn-results">
     <li id="CityId_chzn_o_0" class="active-resultresult-selected" style="">Hà Nội</li>
     <li id="CityId_chzn_o_1" class="active-result" style="">Hồ Chí Minh</li>
    </ul>
   </div>
</div>

我使用 ajax 获取 json 数组并将 json aray 中的新选项替换为下拉列表。选择框有新选项，但它仍然在 div id City_chzn 中显示旧选项。我尝试了多种方式 jquery，但无法刷新它以显示新值。

我的 ajax

<script type="text/javascript">
    $(document).ready(function () {

        $("#CountryId").chosen().change(function () {
            var id = $("#CountryId option:selected").val();
            DDLCountryChange(id);
        });

    });

    function DDLCountryChange(id) {
        var ddl = $("#CityId");
        ddl.chosen();
        ddl.prop("disabled", true);
        $.ajax({
            url: "/Post/GetCityInfoByCountry/" + id,
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                ddl.empty();
                var str = '';
                $.each(result, function (index, value) {
                    ddl.chosen().append("<option value='" + value['Value'] + "'>" + value['Text'] + "</option>");
                    ddl.chosen().trigger('listzt:updated');
                });

                //ddl.prop('disabled', false);
            }
        });
    }
</script>

更新现在我知道为什么我的代码会创建一个 div。因为我的模板使用了选择的 jquery，所以这就是为什么在选择之后创建一个 div 的原因。我选择的版本 0.9.12。我正在使用

ddl.trigger('listzt:updated');

但选择不会更新要显示的新值

更新

我已经解决了我的问题。触发器（'listzt:updated'）不是 listzt:updated。我所有的坏:(

【问题讨论】：

看起来您的 HtmlHelper 正在创建一系列 DIV 和 LI 以创建“假”下拉列表而不是真正的下拉列表...并且在您的 ajax 中您试图引用 ID您在后端（CityID）中提供它，当您应该引用客户端呈现的等效项（CityID_chzn）时......
我不知道 HtmlHelper 是如何创建它的，当我查看我的网站的源代码时，所有的假 div 消失，它只在检查元素时显示。我试图找到一个解决方案来删除所有的 div
查看这里以查找客户端 ID...stackoverflow.com/questions/4829193/…
我知道如何找到 elemet 的 id，但我希望 HtmlHelper 不创建假 div，只选择元素

标签： c# javascript jquery ajax asp.net-mvc-4

【解决方案1】：

请查看这个描述性很强且很有帮助的教程，了解如何在 MVC 环境中使用 JQuery 和 JSON 休息服务来使用 DropDownLists。

http://www.c-sharpcorner.com/UploadFile/4b0136/working-with-dropdownlist-in-mvc-5/

奇怪的是，他们用来制作教程的示例几乎正是您在此处所做的（国家、城市等）...

希望这会有所帮助！

【讨论】：

非常感谢，我解决了我的问题，所有 div 都是由我的模板中选择的 js 创建的