使用基于选项选择的jquery隐藏元素

Question

我有两个表单和一个选择器.

这是我的代码 -

<select>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>

<form id="pp">
<input type="text">
</form>

<form id="cc">
<input type="text">
</form>

现在,如果选择了选项1,我想隐藏表单CC.如果2隐藏形式PP.

我如何用js或jquery做到这一点？谢谢

Answer 1

试试这个(使用jQuery):

$("select").bind("change", function() {
    if ($(this).val() == "1") {
        $("#pp").show();
        $("#cc").hide();
    }
    else if ($(this).val() == "2") {
        $("#pp").hide();
        $("#cc").show();
    }
});

此外,您可以.hide()在用户选择任何选项之前使用如上所示隐藏两个表单.

• bind将事件处理程序附加到选择框的"更改"事件.当用户更改选择的选项时会触发此操作.
• 处理程序内部val用于确定当前所选选项的值.
• show()并hide()根据选择的选项在正确的表单上使用.

工作示例:http://jsfiddle.net/andrewwhitaker/faqZg/