我使用multiselect js插件制作了两个多选下拉列表。 在 st 下拉列表的选项选项中填充2 nd 下拉列表。我为此目的使用了ajax。但是在ajax回调中,2 nd 下拉元素没有变得清晰,并且没有填充新选项。
这是我的HTML代码:
<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>
这是我的JavaScript代码:
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;
}
}
});
}