Установка взаимосвязанных элементов
Функционал взаимосвязей позволит вам скрывать(или показывать) те или иные элементы при выборе определенного пункта.
Внимание!Эта статья использует один вариант из возможных. Для создания своих взаимосвязей действуйте по аналогии, указывая вместо предложенных ниже виджетов свои.
Если у вас не получается установить код самостоятельно, обратитесь в тех.поддержку сервиса
Для начала необходимо выбрать виджет, от которого будет происходить привязка, например, список. Зайдите на вкладку «Формула» и назначьте пунктам значения 0, 1, 2 и т.д.:
Зайдите обратно в «Дизайн», щелкните по нему правой кнопкой мыши и выберите «Исследовать элемент»(«Просмотреть код»). Далее найдите его атрибут ID и скопируйте:
Таким же способом получите ID всех связанных со списком элементов:
Далее добавьте к себе в форму виджет «HTML-код», откройте его и вставьте следующий код:
<script>
$(function() {
$("#ID элементов через запятую").hide();
$("#ID списка").on('change', function() {
var a = $(this).val();
if(a == 0) {
$("#ID элементов через запятую").hide();
appNormalise();
} else if(a == 1) {
$("#ID элемента 1").show();
$("#ID элемента 2").hide();
appNormalise();
} else if(a == 2) {
$("#ID элемента 1").hide();
$("#ID элемента 2").show();
appNormalise();
} else {
$("#ID элементов через запятую").show();
appNormalise();
}
})
});
</script>
Разборка кода
- Если вы хотите скрыть больше, чем 2 элемента, добавьте в каждое условие if {...} код $("#ID элемента").hide(); или $("#ID элемента").show();. Соответственно, если вам требуется скрытие одного элемента, уберите ненужные значения.
- Выражение if(a == 0) {...} говорит о том, что условие внутри него будет выполняться, если выбрать первый пункт списка (т.к. в первом шаге вы установили для него значение 0). Если же у вас больше условий, чем показано в примере, добавьте в конец условия выражение if(a == n) {...}, где n - значение того или иного пункта (их может быть несколько).
- Функция hide скрывает элементы, show - показывает. Применяйте их к элементам, исходя от условия их выполнения.
Калькулятор с готовым решением можно посмотреть в примере: