jquery - jquery插件根据选择选项显示表单

Question

我有一个表格，其中包括具有不同项目的选择选项。根据选择的项目，我需要在同一页面上显示相应的表单。有没有人知道 jquery 插件，或者我们如何才能满足这种要求？

Answer 1

我不知道有什么插件可以做到这一点，但我想你自己实现它应该相当简单。

您需要使用选定选项的值作为选择表单的某种方式。在下面的示例中，我假设所选选项的值是要显示/启用的表单的 ID。页面上的其他表单将需要禁用和隐藏。

// 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");
    });
});

Answer 2

您不需要插件，只需使用 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();
});

显然，如果您有多个元素，并且在任何给定时间只能显示一个，您将需要一些逻辑来处理未选择元素的显示/隐藏。但这应该为您指明正确的方向。