Здравствуйте! Помогите решить следующую задачу. Заказчик по макету требует сделать разные варианты полей в зависимости от вариантов доставки - если нужна доставка, то одни поля, если самовывоз - другие поля. Чтобы сделать максимально по макету, я запихал все поля в один блок - "Покупатель". Сейчас в модуле присутствует возможность скрыть/показать блок целиком - к примеру, если самовывоз - скрыть блок "Адрес доставки". Мне же нужно применить это к отдельным полям.
Придумал следующее - в блоке "Покупатель" сделал select с двумя вариантами - Доставка и Самовывоз. В зависимости от выбранного значения селектора теперь показываются/скрываются нужные мне поля.
Теперь задача - связать данный селектор с блоком "Доставка" - если выбрана доставка, чтобы включался селектор Доставка, при выборе Самовывоза - селектор Самовывоза.
Написал код, вставил его в файл simple.js. По задумке сначала идет проверка состояния радиобаттонов доставки, выбор нужной option select, потом привязка на событие изменения радиобаттонов.
$(document).ready(function () {
setTimeout(function () {
if ($('#mileage\\.city').prop('checked')) {
console.log('mileage checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', true);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', false);
}
if ($('#pickup\\.pickup').prop('checked')) {
console.log('pickup checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', false);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', true);
}
setDeliveryRadio();
}, 150);
});
function setDeliveryRadio() {
$('#mileage\\.city').change(function () {
if ($('#mileage\\.city').prop('checked')) {
console.log('mileage checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', true);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', false);
} else {
console.log('pickup checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', false);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', true);
}
});
$('#pickup\\.pickup').change(function () {
if ($('#pickup\\.pickup').prop('checked')) {
console.log('pickup checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', false);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', true);
} else {
console.log('mileage checked');
$('#customer_order_with_delivery').find('option[value=dostavka]').prop('selected', true);
$('#customer_order_with_delivery').find('option[value=samovyvoz]').prop('selected', false);
}
});
}
В существующем методе reloadAll() добавил в конце вызов метода setDeliveryRadio()
function reloadAll() {
if (typeof Simple.prototype.instances !== "undefined") {
for (var i in Simple.prototype.instances) {
if (!Simple.prototype.instances.hasOwnProperty(i)) continue;
if (typeof Simple.prototype.instances[i].reloadAll === "function") {
Simple.prototype.instances[i].reloadAll();
}
}
}
setDeliveryRadio();
}
В итоге - срабатывает только один раз после перезагрузки страницы. Понимаю, что идет работа по Ajax, из-за этого не работает, как нужно. Помогите довести до ума.