Question

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

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

    });

Answer 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。如果您想尝试进一步复制问题，请随时编辑。

Answer 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();
     });

选择下拉级联问题

2 个答案: