I have made two multiselect dropdown using multiselect js plugin. 2nd dropdown gets populated on the option selection of 1st dropdown. I have use ajax for this purpose. But on ajax callback, 2nd dropdown elements are not getting clear, and new options are not populating.
This is my html code:
<div class="row col-md-6" > <select id="multidropdown" multiple="multiple" onchange="ChangedView()"> @foreach (var item in clients) { <option value=@item.ToString() class="col-md-5"> @item.ToString() </option> } </select> </div> <div class="row col-md-6" id="ProgramsDiv"> <select id="programIDs" multiple="multiple" onchange="SelectSensorsFromPrograms()"> @foreach (var item in programs) { <option value=@item.ToString() class="col-md-5"> @item.ToString() </option> } </select> </div> and this is my JavaScript code:
function ChangedView() { $(".mtable").remove(); var multiclients = $("#multidropdown option:selected").text(); var program = $("#programIDs option:selected").text(); var sensors = $("#sensorIDs option:selected").text(); var request = $.ajax({ url: '@Url.Action("GetselectedProgramClient")', type: 'POST', data: { "ClientNames": multiclients }, dataType: 'json', success: function (data) { debugger; if (data.length > 0) { $('#programIDs').html(''); var options = ''; console.log(data.length+"\n"); for (var i = 0; i < data.length; i++) { options += '<option value="' + data[i] + '">' + data[i] +" " + '</option>'; console.log(options); } $('#programIDs').append(options); $('#programIDs').multiselect('rebuild'); } }, error: function (xhr) { console.log("Error: " + xhr.statusText); if (xhr.statusText == 'error') { return; } else if (xhr.statusText == 'OK') { return; } } }); }