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();
});

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

jquery插件，根据select选项显示表单

2 个答案: