选择下拉级联问题答案

【问题标题】：Chosen Dropdown cascading issue选择下拉级联问题
【发布时间】：2014-03-24 21:54:06
【问题描述】：

我正在使用Chosen cdn 显示带有级联的下拉菜单。但我看到在第一个下拉列表中选择值后显示了一个额外的下拉列表。总共填充了 3 个下拉列表，一个是选择组，其他 2 个是选择应用程序。在 2 个新填充的下拉列表中，一个具有未选择样式的应用程序值，另一个是具有所选样式的空选择应用程序下拉列表。任何帮助将不胜感激。

Html Razor code

@Html.DropDownListFor(x => x.SelectedGroup, Model.Groups, "Select Group")
@Html.DropDownListFor(x => x.SelectedApp, new List<SelectListItem>(), "Select")

Jquery Code

 $('#SelectedGroup').chosen();
 $('#SelectedApp').chosen();


$('#SelectedGroup').on('change', function (event, ui) {
        var project_id = this.value;
        var appdropdown = $('#SelectedApp');
        appdropdown.prop("disabled", true);
        appdropdown.empty();
        appdropdown.append($('<option></option>').val("-1").html('Select'));
        nextLinkApps = $('#ServiceUri').val();

        loadApps(); // This is append values to option

    });

【问题讨论】：

您能否明确说明哪一部分不工作？
在下拉列表更改时，它会在该下拉列表旁边添加重复的下拉列表。
@Chandana 检查我的更新答案以隐藏重复下拉菜单

标签： jquery html-select jquery-chosen html.dropdownlistfor

【解决方案1】：

我改变了这一行：

        appdropdown.prop("disabled", false);

并填充了 loadApps 函数。您可以替换自己的 AJAX 调用或数据。

function loadApps(project_id)
{
  switch(project_id)
  {
      case "1":
          appdropdown.append($("<option>").val("1").text("App1")); 
          break;

      case "2":
          appdropdown.append($("<option>").val("2").text("App2"));
          break;   
  }
  appdropdown.trigger("chosen:updated")
}

这是jsFiddle。如果您想尝试进一步复制您的问题，请随时进行编辑。

【讨论】：

Kravits，一旦我在下拉列表中选择了值，它就会为其添加额外的下拉列表。我认为选择的是添加额外的下拉菜单。我有 $('#SelectedApp').chosen();在document.ready上。我认为这是添加重复的下拉菜单。如何隐藏没有选择样式的其他下拉菜单？
好的，我无法在此处复制您的问题：jsfiddle.net/UPkkX/3 我认为问题一定出在您的 JavaScript 其他地方。如果需要，请发布更多代码。否则只要弄清楚它在 DOM 中的位置，你就可以隐藏它： $("select").hide();

【解决方案2】：

jquery

 $('#SelectedGroup').chosen();

 $('#SelectedGroup').on('change', function (event, ui) {
    var project_id = this.value;
    $('#AppValues').prop("disabled", false);
    $('#AppValues').empty();
    loadApps(project_id); // This is append values to option

});

function loadApps(value)
{
   switch(value)
   {
     case 1:
        $('#AppValues').append($('<option>', { 
                      value: value1,
                      text : value1 
                       }));
     break;
     case 2:
        $('#AppValues').append($('<option>', { 
                      value: value2,
                      text : value2 
                       }));
     break;  
   }
  $('#SelectedApp').prop("disabled", false);
   //here u can populate SelectedApp values
  $('#SelectedApp').chosen();
}

如果你想对级联下拉菜单有一个完整的了解check this plugin

for hiding duplicate dropdown without chosen class you can try this code

html

 <div id="dropdownList">
    <select id="SelectedGroup" class="chosen">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="AppValues" disabled> // AppValuesis not chosen
    </select>
    <select id="SelectedApp" class="chosen" disabled> // SelectedApp is chosen
    </select>
    </div>

jquery

$('#dropdownList select').each(function(){
    if(!$(this).hasClass('chosen'))  // or whatever the css class for chosen dropdown
        $(this).hide();
     });

【讨论】：