jquery - 根据下拉菜单显示/隐藏表单

Question

我试图根据保管箱选择显示一种特定的表单。这是我到目前为止所拥有的: HTML:

                <select id='selector'>
                    <option value='option-1' id="opt1">Option 1</option>
                    <option value='option-2' id="opt2">Option 2</option>
                    <option value='option-3' id="opt3">Option 3</option>
                </select>



                <form action="" method="post" id="form1" class="form">
                    <input id="input_1" name="input_1" type="text"/>
                    <input id="input_2" name="input_2" type="text"/>
                    <input id="input_3" name="input_3" type="text"/>
                </form>​

                <form action="" method="post" id="form2" class="form">
                    <input id="input_4" name="input_1" type="text"/>
                    <input id="input_5" name="input_2" type="text"/>
                    <input id="input_6" name="input_3" type="text"/>
                </form>​

                <form action="" method="post" id="form3" class="form">
                    <input id="input_7" name="input_1" type="text"/>
                    <input id="input_8" name="input_2" type="text"/>
                    <input id="input_9" name="input_3" type="text"/>
                </form>​

和jquery:

    $select.change(function(){
        if($(this).val() == "opt1"){
            if($('#form1').is(":hidden")){
                $('#form1').show();            
            }        
            $('#form2').hide();
            $('#form3').hide(); 
        }
        if($(this).val() == "opt2"){
            if($('#form2').is(":hidden")){
                $('#form2').show();            
            }
            $('#form1').hide();
            $('#form3').hide(); 
        }
        if($(this).val() == "option3"){
            if($('#form3').is(":hidden")){
                $('#form3').show();            
            }
            $('#form1').hide();
            $('#form2').hide(); 
        }     
    });

我想将它用于不同的联系人类型，例如。 “获取报价”、“一般查询”、“发布反馈” - 除非您有更好的主意。感谢您的时间和帮助。

jsfiddle:here

这里的问题是这不起作用。它同时显示所有表单，并且 #selector 根本不影响任何表单的可见性。

Answer 1

我想这就是你所追求的 -

$(function() {
    var $select = $("#selector");
    $select.change(function () {
        if ($('#selector option:selected').attr("id") == "opt1") {
            if ($('#form1').is(":hidden")) {
                $('#form1').fadeIn(400);
            }
            $('#form2').hide();
            $('#form3').hide();
        }
        if ($('#selector option:selected').attr("id") == "opt2") {
            if ($('#form2').is(":hidden")) {
                $('#form2').fadeIn(400);
            }
            $('#form1').hide();
            $('#form3').hide();
        }
        if ($('#selector option:selected').attr("id") == "opt3") {
            if ($('#form3').is(":hidden")) {
                $('#form3').fadeIn(400);
            }
            $('#form1').hide();
            $('#form2').hide();
        }
    });
});

jsfiddle - http://jsfiddle.net/RY2vD/

/编辑

这是我的解决方法(一点重构) -

$(function () {
    hideForms();
    $("#form1").show();
    $("#selector").change(function () {
        hideForms();
        if ($('#selector option:selected').attr("id") == "opt1") {
            $('#form1').fadeIn(400);
        } else if ($('#selector option:selected').attr("id") == "opt2") {
            $('#form2').fadeIn(400);
        } else {
            $('#form3').fadeIn(400);
        }
    });
});

function hideForms() {
    $(".form").hide();
    // maybe some other stuff to do here
}

http://jsfiddle.net/xpL49/3/