Chosen Dropdown cascading issue

Question

I am using Chosen cdn to display dropdown with cascading. But I see one more extra dropdown displayed after selecting value in first dropdown. total 3 dropdowns are populated one is select group and other 2 are Select App. Out of 2 newly populated dropdowns one has app values with no chosen style and other is empty select app dropdown with chosen style. Any help would be appreciated.

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

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

if u want a complete idea about cascading dropdowns 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();
     });

Answer 2

I changed this line:

        appdropdown.prop("disabled", false);

and filled the loadApps function. You can substitute your own AJAX call or data.

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")
}

Here is a jsFiddle. Feel free to edit if you want to try to replicate your problem further.