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

【问题标题】：jquery plugin to show form based on select optionjquery插件根据选择选项显示表单
【发布时间】：2011-02-22 09:34:39
【问题描述】：

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

【问题讨论】：

标签： jquery forms select option

【解决方案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");
    });
});

【讨论】：

这看起来是正确的，但是当我选择任何选项时，它确实显示了该选项的表单，但它隐藏了包含选择框的原始表单。
@yogsma - 当我第一次发布答案时，它并不完整（表单元素没有被禁用等）。我会要求您再试一次，我想您可能已经尝试过最初的（未经编辑的）答案。另外，我没有意识到您的选择在其中一个表格中。如果您发布一些标记，我可以进行上述工作。

【解决方案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();
});

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

【讨论】：