Динамические формы с деформацией

Создание формы с деформацией и желание изменить класс pageShema в зависимости от выбора, сделанного пользователем. Бывший. если он выбирает вариант 1 из selectwidget, покажите ему один набор полей, в случае другого выбора - другой. Как это сделать?


person Eve    schedule 11.12.2015    source источник
comment
Пожалуйста, добавьте немного кода в вопрос, чтобы мы поняли, что происходит.   -  person Mikko Ohtamaa    schedule 12.12.2015


Ответы (1)


Вы можете использовать jquery и выбрать с атрибутом «имя». Кроме того, вы можете использовать функцию jquery «parent()», чтобы получить контейнер ввода, который вы хотите показать/скрыть.

Например, в вашей схеме сделайте что-то вроде:

# This is the "<select>"
choices = (('yes','Yes'),
           ('no', 'No'))
bar = colander.SchemaNode(colander.String(),
                          widget=deform.widget.SelectWidget(values=choices))

# This is the input that should appear only when the "yes" value is selected
foo = colander.SchemaNode(colander.String())

Затем в своем шаблоне добавьте что-то вроде:

<script>
$( document ).ready(function() {

// ensure that the "foo" input starts hidden
var target = $("input[name=foo]").parent().parent();
target.hide();

$("select[name=bar]").on('change', function(){
    var valueSelected = this.value;
    if (valueSelected == "yes") {
      target.show();
    } else {
      target.hide();
    }
});



});
</script>
person Matteo Gamboz    schedule 29.04.2016
comment
Очень красивое решение. Легко и умно. - person karantan; 06.06.2016
comment
Также для более полного решения вы можете использовать что-то вроде github.com/miohtama/jquery-interdependencies. - person Mikko Ohtamaa; 26.10.2016