Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

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

Оформить доступ с промокодом

100

#2470a1

Как создать зависимый dropdown список в Tilda

Разборы известных шахматных партий

Получить разбор партий чемпионских турниров

Выберете нужный период

Скачайте разбор всех партий

Как создать зависимый dropdown список в Tilda

Создали блок с формой

Добавили в него первый выпадающий список с именем - period
Заполнили его годами

Добавили второй выпадающий список с именем - champion
Заполнили его:

Вильгельм Стейниц
Австро-Венгрия

Добавили код в блок Другое - Т123
В коде прописали все соответствия между списками

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Как зависимость между выпадающими списками.
Менять состав второго списка при изменении выбора в первом.

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<script>
$( document ).ready(function() {
let listMap = {
    "1886 – 1894" :["Вильгельм Стейниц","Австро-Венгрия"],
    "1894 – 1921" :["Эммануил Ласкер","Германия"],
    "1921 – 1927" :["Хосе Рауль Капабланка","Куба"],
    "1927 – 1935" :["Александр Алёхин","Россия/Франция"],
    "1935 – 1937" :["Макс Эйве","Голландия"],
    "1937 – 1946" :["Александр Алёхин","Россия/Франция"],
    "1948 – 1957" :["Михаил Ботвинник","СССР"],
    "1957 – 1958" :["Василий Смыслов","СССР"],
    "1958 – 1960" :["Михаил Ботвинник","СССР"],
    "1960 – 1961" :["Михаил Таль","СССР"],
    "1961 – 1963" :["Михаил Ботвинник","СССР"],
    "1963 – 1969" :["Тигран Петросян","СССР"],
    "1969 – 1972" :["Борис Спасский","СССР"],
    "1972 – 1975" :["Роберт Фишер","СССР"],
    "1975 – 1985" :["Анатолий Карпов","СССР"],
    "1985 – 2000" :["Гарри Каспаров","СССР/Россия"],
    "2000 – 2007" :["Владимир Крамник","Россия"],
    "2007 – 2013" :["Вишванатан Ананд","Индия"],
    "2013 – н.в"  :["Магнус Карлсен","Норвегия"]
};

let point = $('select[name="champion"]');
function fillSelect(em){
    point.empty();
    $.each(listMap[em],function(index,value){
        point.append('<option value="'+value+'">'+value+'</option>')
    });   
};

$('form').on('change', 'select[name="period"]', function() {      
    let period = $('select[name="period"]').val();
    if(listMap[period]==undefined){
        console.log("period not found in listMap");
    }else{
        fillSelect(period);
    };
});
});
</script>

Библиотека для примера

Для Zero
Форме задали класс dependenceform


<script>
$( document ).ready(function() {
let listMap = {
    "1886 – 1894" :["Вильгельм Стейниц","Австро-Венгрия"],
    "1894 – 1921" :["Эммануил Ласкер","Германия"],
    "1921 – 1927" :["Хосе Рауль Капабланка","Куба"],
    "1927 – 1935" :["Александр Алёхин","Россия/Франция"],
    "1935 – 1937" :["Макс Эйве","Голландия"],
    "1937 – 1946" :["Александр Алёхин","Россия/Франция"],
    "1948 – 1957" :["Михаил Ботвинник","СССР"],
    "1957 – 1958" :["Василий Смыслов","СССР"],
    "1958 – 1960" :["Михаил Ботвинник","СССР"],
    "1960 – 1961" :["Михаил Таль","СССР"],
    "1961 – 1963" :["Михаил Ботвинник","СССР"],
    "1963 – 1969" :["Тигран Петросян","СССР"],
    "1969 – 1972" :["Борис Спасский","СССР"],
    "1972 – 1975" :["Роберт Фишер","СССР"],
    "1975 – 1985" :["Анатолий Карпов","СССР"],
    "1985 – 2000" :["Гарри Каспаров","СССР/Россия"],
    "2000 – 2007" :["Владимир Крамник","Россия"],
    "2007 – 2013" :["Вишванатан Ананд","Индия"],
    "2013 – н.в"  :["Магнус Карлсен","Норвегия"]
};


function fillSelect(em){
    let point = $('select[name="champion"]');
    point.empty();
    $.each(listMap[em],function(index,value){
        point.append('<option value="'+value+'">'+value+'</option>')
    });   
};
function changeDrop(){
    let period = $('select[name="period"]').val();
    if(listMap[period]==undefined){
        console.log("period not found in listMap");
    }else{
        fillSelect(period);
    }; 
};
$('.dependenceform').on('change', 'select[name="period"]', function() { changeDrop()});
setTimeout(function(){ changeDrop()}, 2000);
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ 
    changeDrop();
}, 1000);
});
});
</script>