Chandana Chandana - 6 months ago 25
jQuery Question

Chosen Dropdown cascading issue

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

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