jquery - Chosen Dropdown cascading issue -
i using chosen cdn display dropdown cascading. see 1 more dropdown displayed after selecting value in first dropdown. total 3 dropdowns populated 1 select group , other 2 select app. out of 2 newly populated dropdowns 1 has app values no chosen style , other empty select app dropdown chosen style. 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(); // append values option });
jquery
$('#selectedgroup').chosen(); $('#selectedgroup').on('change', function (event, ui) { var project_id = this.value; $('#appvalues').prop("disabled", false); $('#appvalues').empty(); loadapps(project_id); // append values 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 complete idea cascading dropdowns check plugin
for hiding duplicate dropdown without chosen class can try 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 chosen </select> </div>
jquery
$('#dropdownlist select').each(function(){ if(!$(this).hasclass('chosen')) // or whatever css class chosen dropdown $(this).hide(); });
Comments
Post a Comment