У меня проблема с вызовом URL-адреса с несколькими запросами в ajax по одному и тому же URL-адресу и получению одного и того же ответа.У меня есть bootstrap-select, и я хочу вызвать n-адрес запроса в ajax, когда пользователь нажимает один, два или десять выбранных вариантов. У вас есть идея?
$(document).ready(function () {
initmyDataTabl1List();
changemyDataTabl1();
changemyDataTabl2();
})
function initmyDataTabl1List() {
$('#callmyDataTabl1').click(function () {
$.getJSON(MYURL + 'myController/myActionDataTabl1', function () {
}).done(function (data) {
if (data !== null && data.length > 0) {
$('#myDataTabl1').empty();
$.each(data, function (i, theItem) {
var libelle = theItem.myDataTabl1_libelle
var idItem = theItem.myDataTabl1_id
var combomyDataTabl1 = document.getElementById('myDataTabl1')
var optionmyDataTabl1 = document.createElement('option')
optionmyDataTabl1.text = libelle
optionmyDataTabl1.value = idItem
try {
combomyDataTabl1.add(optionmyDataTabl1, null)
} catch (error) {
alert('error found')
combomyDataTabl1.add(optionmyDataTabl1)
}
})
$('.selectpicker').selectpicker('refresh');
}
})
})
}
function changemyDataTabl1() {
$('#myDataTabl1').on('changed.bs.select', function (e, clickedIndex, newSelect) {
var idDiv = '#' + $(this).attr('id');
var valDiv = $('#myDataTabl1').val();
var arrayIdmyDataTabl1 = new Array(valDiv.length)
if (newSelect) {
for (var i = 0; i < valDiv.length; i++) {
arrayIdmyDataTabl1[i] = MYURL + 'controller/myaction/' + valDiv[i]
}
loadmyDataTabl2BaseOnmyDataTabl1(arrayIdmyDataTabl1)
} else {
$(idDiv).selectpicker('refresh');
for (var i = 0; i < valDiv.length; i++) {
arrayIdmyDataTabl1[i] = MYURL + 'controller/myaction/' + valDiv[i]
}
loadmyDataTabl2BaseOnmyDataTabl1(arrayIdmyDataTabl1)
}
});
}
function getFullName(item) {
var fullname = $.ajax({
type: 'GET',
contentType: 'application/json,charset=utf-8',
dataType: 'json',
url: item,
async: true,
success: function (result) { }
})
return fullname
}
function loadmyDataTabl2BaseOnmyDataTabl1(array) {
var resultToSend = array.map(getFullName)
switch (resultToSend.length) {
case 1:
$.when(resultToSend[0]).done(function (rep1) {
var data = rep1[0]
var optLength = $('#myDataTabl2 option').length;
if (optLength > 0) {
$('#myDataTabl2 option').remove();
}
$.each(rep1, function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$('.selectpicker').selectpicker('refresh');
})
break
case 2:
$.when(resultToSend[0], resultToSend[1]).done(function (rep1, rep2) {
var data = rep1[0] + rep2[0]
var optLength = $('#myDataTabl2 option').length;
if (optLength > 0) {
$('#myDataTabl2 option').remove();
} if (rep1[0].length > 0) {
$.each(rep1[0], function (key, value) {
// $.each(value, function (key1, value1) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
// });
})
}
if (rep2[0].length > 0) {
$.each(rep2[0], function (key, value) {
//$.each(value, function (key1, value1) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
//});
})
}
$('.selectpicker').selectpicker('refresh')
})
break
case 3:
$.when(resultToSend[0], resultToSend[1], resultToSend[2]).done(function (
rep1,
rep2,
rep3
) {
var optLength = $('#myDataTabl2 option').length;
if (optLength > 0) {
$('#myDataTabl2 option').remove();
}
$.each(rep1[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$.each(rep2[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$.each(rep3[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$('.selectpicker').selectpicker('refresh')
})
break
case 4:
$.when(
resultToSend[0],
resultToSend[1],
resultToSend[2],
resultToSend[3]
).done(function (rep1, rep2, rep3, rep4) {
var data = rep1[0] + rep2[0] + rep3[0] + rep4[0]
$.each(rep1[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$.each(rep2[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$.each(rep3[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$.each(rep4[0], function (key, value) {
$('#myDataTabl2').append(
$('<option></option>')
.val(value.myId)
.html(value.myName)
)
})
$('.selectpicker').selectpicker('refresh')
})
break
default:
console.log('You must select four choices : ')
break
}
}
<select id="myDataTabl1" name="myDataTabl1" class="form-control selectpicker"
multiple data-live-search="true">
</select>
<select id="myDataTabl2" name="myDataTabl2" class="form-control selectpicker"
multiple data-live-search="true">
</select>
<select id="myDataTabl3" name="myDataTabl3" class="form-control selectpicker"
multiple data-live-search="true">
</select>
Проблема в том, как я могу агрегировать этот вызов, потому что, если пользователь выберет десять, мне будет очень трудно это сделать.