选择的插件 DropDownList 未更新

Question

我正在使用 Chosen DDL Plug-in 并根据所选的其他项目创建 DDL。

第一个 DDL 在加载时填充了一个供用户选择的项目列表。一旦用户从这个列表中选择了一个项目，我就会显示第二个 DDL 供他们选择项目类型。然后这会填充第三个 DDL。这第三个 DDL 没有执行 Chosen 更新。

select项如下：

<table style="width: 100%;">
    <tbody>
        <tr style="">
            <td style="width: 33%;">
                <select id="ddlOne">
                    <option value="placeholder">-- Select --</option>
                    @for (int n = 0; n < Model.Count; n++)
                    {
                        <option value="@Model[n]">@Model[n]</option>
                    }
                </select>
            </td>
            <td style="width: 33%; display:none;" id="tdDbItemType">
                <select id="ddlItemtype">
                    <option value="placeholder">-- Select --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </td>
            <td style="width: 33%; display:none;" id="tdDbItemName">
                <select id="ddlItemName" style="width:33%;"></select>
            </td>
        </tr>
    </tbody>
</table>

我创建这些 Chosen DDL 是这样的：

$('#ddlItemtype').chosen({
    no_results_text: "Oops, nothing was found!",
    width: "95%",
    search_contains: true // allows for a user to do a contains search
});

$('#ddlOne').chosen({
    no_results_text: "Oops, nothing was found!",
    width: "95%",
    search_contains: true // allows for a user to do a contains search
});

$('#ddlItemName').chosen({   // if I remove this, I can use the originally select, without utilizing the Chosen features/styling
    no_results_text: "Oops, nothing was found!",
    width: "95%",
    search_contains: true // allows for a user to do a contains search
});

这些在脚本中的 chosen.change() 部分之上

关于 ddlItemType 的更改事件，我这样做：

$('#ddlItemtype').chosen().change(function () {
    $('.waiting').show(); // spinning wheel gif
    var objSelectedItemType = $('#ddlItemtype').find('option:selected');
    var sSelectedItemType = objSelectedItemType[0].innerText;
    sItemType = sSelectedItemType;
    LoadItemList(sSelectedItemType);
    $('.waiting').hide();
    //$('#ddlItemName').chosen().trigger('chosen:updated'); // $(...).chosen is not a function
});

和里面 LoadItemList()

$.ajax({
        type: "GET",
        url: "/Database/GetDatabaseItemList/",
        data: { "": id },
        success: function (response) {
            var sHtml = '';
            $('#ddlDatabaseItemName').empty();
            sHtml = '<option value="placeholder">' + '-- Select Item --' + '</option>';
            try {
                for (var n = 0; n < response.length; n++) {
                    sHtml += '<option value="' + response[n] + '">' + response[n] + '</option>';
                }
                $('#ddlItemName').html(sHtml);
                $('#tdDbItemName').show();
            }
            catch (e) {
                alert("Error in the ajax: " + e);
                return false;
            }
            finally {
                $('#ddlItemName').trigger('chosen:updated');
                console.log('LoadItemList worked well');
            }
        }
    });

当我在 AJAX 调用后检查原始 select 项目时，选项已添加到 select 项目但我无法更新 Chosen DDL.

所有这些都在 $(document).ready();

之外

我正在使用 jQuery 3.2.1，我已经尝试了 1.8.2 和 1.7.0 版本的 Chosen。

编辑：添加了 HTML 标记和触发 AJAX 调用的 chosen().change()

EDIT2：最终答案是下面尤达大师的答案和我的 _Layout,cshmtl 页面中对 jQuery 的另一个引用的组合。一旦我实施了尤达大师的方法并删除了最后一个 jQuery 参考，它就开始运行得非常好。

Answer 1

您的 AJAX 请求的回调中可能发生错误：

$('#ddlItemtype').chosen({
  no_results_text: "Oops, nothing was found!",
  width: "95%",
  search_contains: true // allows for a user to do a contains search
});

$('#ddlOne').chosen({
  no_results_text: "Oops, nothing was found!",
  width: "95%",
  search_contains: true // allows for a user to do a contains search
});

$('#ddlItemName').chosen({
  no_results_text: "Oops, nothing was found!",
  width: "95%",
  search_contains: true // allows for a user to do a contains search
});

$('#ddlItemtype').chosen().change(function() {
  $('.waiting').show(); // spinning wheel gif
  var objSelectedItemType = $('#ddlItemtype').find('option:selected');
  var sSelectedItemType = objSelectedItemType[0].innerText;
  sItemType = sSelectedItemType;
  LoadItemList(sSelectedItemType);
  $('.waiting').hide();
});

//used in place of your AJAX call
function LoadItemList(id) 
{
  $.ajax({
        type: "GET",
        url: "/Database/GetDatabaseItemList/",
        data: { "": id },
        success: function (response) 
        {
          //this will obviously fail here
          //added logic to error method instead
        },
        error: function(response)
        {
            try 
            {
              //use empty instead of .html('')
              $('#ddlItemName').empty();

              //build up your list of items
              for (var n = 1; n <= 10; n++) 
              {
                $('#ddlItemName').append('<option> item name ' + n + '</option');
              }                         
                 //call this in your success callback method
                 $("#ddlItemName").chosen().trigger("chosen:updated");
              } 
            catch (err) 
            {
              alert("error caught");
            }
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />

<table style="width: 100%;">
  <tbody>
    <tr style="">
      <td style="width: 33%;">
        <select id="ddlOne">
          <option value="placeholder">--Select --</option>
        </select>
      </td>
      <td style="width: 33%;" id="tdDbItemType">
        <select id="ddlItemtype">
          <option value="placeholder">-- Select --</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </td>
      <td style="width: 33%;" id="tdDbItemName">
        <select id="ddlItemName" style="width:33%;"></select>
      </td>
    </tr>
  </tbody>
</table>

选择的插件 DropDownList 未更新

Chosen Plug-in DropDownList Not Updating

ajax

jquery

jquery-chosen