Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать зависимость между выпадающими списками в Tilda
Аренда компрессора в Твери
Дизельные компрессоры Atlas Copco с отбойными молотками в комплекте
Модель компрессора
Срок аренды
Стоимость аренды:
Итого: 0 руб.
Телефон
Нажимая на кнопку, Вы соглашаетесь с обработкой персональных данных

Как сделать зависимость между выпадающими списками в Tilda

1
Создали блок BF402N
2
Добавили в него поле - Выпадающий список моделей и задали ему имя model
3
Добавили ещё один - Выпадающий список срока аренды и задали ему имя time
3
Добавили поле калькулятор с формулой model*time
4
Добавили код на страницу, в блок Другое - Т123
В коде изменили все цены для второго выпадающего списка
Заполнение списков на картинках ниже
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём зависимость между выпадающими списками в форме стандартного блока и ZeroBlock.
Длительность видео: 21 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
$( document ).ready(function() {
  //При изменении модели
 $(document).on('change','select[name="model"]',function(e){      
//Вычисляем позицию выбора
 var place = $(this)[0].selectedIndex;  
 $('select[name="time"]').empty().trigger('change');
 
 if (place==0 || place==1){//Если первый вариант, то меняем список времени аренды
$('select[name="time"]').append( $('<option value="">Выберите срок аренды ...</option>'));     
$('select[name="time"]').append( $('<option value="Заказ на 2 часа " data-calc-value=" 2200">Заказ на 2 часа </option>'));
$('select[name="time"]').append( $('<option value="Смена 8 часов " data-calc-value=" 5500">Смена 8 часов </option>'));
$('select[name="time"]').append( $('<option value="2 смены 16 часов " data-calc-value=" 10300">2 смены 16 часов </option>'));
$('select[name="time"]').append( $('<option value="5 смен 40 часов " data-calc-value=" 19000">5 смен 40 часов </option>'));
 };
  if (place==2){//Если второй вариант, то меняем список времени аренды
$('select[name="time"]').append( $('<option value="">Выберите срок аренды ...</option>'));     
$('select[name="time"]').append( $('<option value="Заказ на 2 часа " data-calc-value=" 2500">Заказ на 2 часа </option>'));
$('select[name="time"]').append( $('<option value="Смена 8 часов " data-calc-value=" 6200">Смена 8 часов </option>'));
$('select[name="time"]').append( $('<option value="2 смены 16 часов " data-calc-value=" 11900">2 смены 16 часов </option>'));
$('select[name="time"]').append( $('<option value="5 смен 40 часов " data-calc-value=" 27000">5 смен 40 часов </option>'));
 };
  if (place==3){//Если третий вариант, то меняем список времени аренды
$('select[name="time"]').append( $('<option value="">Выберите срок аренды ...</option>'));     
$('select[name="time"]').append( $('<option value="Заказ на 2 часа " data-calc-value=" 4500">Заказ на 2 часа </option>'));
$('select[name="time"]').append( $('<option value="Смена 8 часов " data-calc-value=" 11000">Смена 8 часов </option>'));
$('select[name="time"]').append( $('<option value="2 смены 16 часов " data-calc-value=" 19000">2 смены 16 часов </option>'));
$('select[name="time"]').append( $('<option value="5 смен 40 часов " data-calc-value=" 44000">5 смен 40 часов </option>'));
};

$('select[name="time"]')[0].dispatchEvent(new Event('change', { bubbles: true }));

});
});
</script>
Made on
Tilda