JQuery плагин для отображения формы на основе выбора - PullRequest
1 голос
/ 21 мая 2010

У меня есть форма, которая включает в себя варианты выбора с различными элементами. На основе выбранного элемента мне нужно показать соответствующую форму на той же странице. Кто-нибудь знает плагин jquery для этого или как эстетически мы можем выполнить такое требование?

Ответы [ 2 ]

1 голос
/ 21 мая 2010

Для этого вам не нужен плагин, просто используйте сам jQuery.

$('#id_of_select').change(function() {
    // get the value of the selected option
    var val = $('#id_of_select :selected').val();

    // show the element on the page
    $('#'+ val).show();
});

Очевидно, что если у вас есть более одного элемента, и в любой момент времени может быть показан только один элемент, вы захотите иметь некоторую логику для обработки показа / скрытия невыбранных элементов. Но это должно указать вам правильное направление.

1 голос
/ 21 мая 2010

Я не знаю ни одного плагина, который бы делал именно это, но я думаю, что он должен быть достаточно простым для реализации самостоятельно.

Вам нужно будет использовать значение выбранной опции как способ выбора формы. В приведенном ниже примере я принял значение выбранной опции в качестве идентификатора формы, которую нужно показать / включить. Другие формы на странице должны быть отключены и скрыты.

// for example
$(document).ready(function() {

    // set up the page, hide all forms, disable their controls
    $("form").hide()
             .find(":input")
             .attr("disabled", "disabled");

    $("#selectId").change(function() {

        // hide all forms, disabled their inputs
        $("form:not(#" + this.value + ")").hide()
                                          .find(":input")
                                          .attr("disabled", "disabled");

        // reveal the form who's ID is this selected option's value, enable all controls
        $("#" + this.value).show()
                           .find(":input")
                           .removeAttr("disabled");
    });
});
...