Как создать зависимый dropdown список в Tilda
Разборы известных шахматных партий
Получить разбор партий чемпионских турниров
Выберете нужный период
Скачайте разбор всех партий
Годы чемпионства
Чемпион
Ваше имя

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

1
Создали блок с формой
2
Добавили в него первый выпадающий список с именем - period
Заполнили его годами
3
Добавили второй выпадающий список с именем - champion
Заполнили его:

Вильгельм Стейниц
Австро-Венгрия
4
Добавили код в блок Другое - Т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>
Made on
Tilda