【发布时间】:2017-09-05 00:35:25
【问题描述】:
我有两个下拉列表,其中一个依赖于另一个。让我们调用的是多选1和多选2。根据多选1中选择的值,多选2的下拉列表通过ajax调用发生变化。
我正在基于“onChange”触发我的 ajax 调用。 但是,当用户打开页面并且默认情况下,所有值都将在多选 1 中选择,但由于我当前的设置仅用于 onchange,如何根据所有默认选择触发我的 ajax 调用? 在更改 AJAX 调用时,它完全可以正常工作,除非全部选中 --->
$('#market-select').multiselect(
{
includeSelectAllOption: true,
selectAllValue: 'multiselect-all',
filterBehavior: 'value',
enableFiltering: true,
buttonWidth: '270px',
onChange: function (option, checked) {
var markets = $('#market-select option:selected');
var selected = [];
var json = "'" + JSON.stringify(selected) + "'";
$(markets).each(function (index, markets) {
selected.push($(this).val())
});
$.ajax({
type: "POST",
dataType: "json",
url: _config.GetCampaignsByMarket,
data: JSON.stringify({
marketValue: selected
}),
contentType: 'application/json',
success: function (data) {
var items = ''; //the original example which makes constant call to dom when the other one makes call only twice
$('.select-ajax').empty();
$.each(data, function (key, val) {
$('.select-ajax').append('<option selected value="' + val.CampaignInitiative + '">' + val.CampaignInitiative + '</option>');
items += "<option value='" + val.CampaignInitiative + "'>" + val.CampaignInitiative + "</option>";
});
$('.select-ajax').multiselect('rebuild');
},
error: function (xhr, status, error) {
}
});
}
});
尝试在初始化时初始化 ajax 调用,这显然不起作用。在这一点上我快疯了。
$("#market-select").multiselect('selectAll', false);
$("#market-select").multiselect('updateButtonText');
var allMarkets = $('#market-select:selected').map(function (a, item) {
$.ajax({
type: "POST",
dataType: "json",
url: _config.GetCampaignsByMarket,
data: JSON.stringify({
marketValue: allMarkets
}),
contentType: 'application/json',
success: function (data) {
var items = ''; //the original example which makes constant call to dom when the other one makes call only twice
$('.select-ajax').empty();
$.each(data, function (key, val) {
$('.select-ajax').append('<option selected value="' + val.CampaignInitiative + '">' + val.CampaignInitiative + '</option>');
items += "<option value='" + val.CampaignInitiative + "'>" + val.CampaignInitiative + "</option>";
});
//var options = data.map(function (o) {
// return '<option selected value="' + o.CampaignInitiative + '">' + o.CampaignInitiative + '</option>'; // faster as it only accesses the DOM twice, compared to the original's 2+N array items.'
//}).join('');
$('.select-ajax').multiselect('rebuild');
},
error: function (xhr, status, error) {
}
});
});
【问题讨论】:
标签: javascript jquery ajax twitter-bootstrap