选择插件DropDownList不更新

Question

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

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

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

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

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

之外

我正在使用jQuery 3.2.1并且我已经尝试了1.8.2 1.7.0和Chosen两种版本。

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

EDIT2：最终答案是下面的Yoda大师答案的组合，我的_Layout,cshmtl页面中还有另一个对jQuery的引用。一旦我实现了Master Yoda的方法并删除了最后一个jQuery引用，它开始工作得非常好。

Answer 1

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

＆＃13;

＆＃13;

$('#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");
            }
        }
    });
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;