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