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

Question

我试图根据 Dropbox 选择显示一种特定形式。这是我到目前为止所拥有的： 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/

Answer 2

HTML

<select id='selector' onload="typeres()" onchange="typeres()">
   <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>

Javascript 和 jQuery

function typeres(){
  $('.form').css('visibility','hidden');
  var e=document.getElementById("selector");
  if(e.options[e.selectedIndex].value=="option-1"){
      $('#form1').css('visibility','visible');
  }else if(e.options[e.selectedIndex].value=="option-1"){
      $('#form2').css('visibility','visible');                                             
  }else{
      $('#form3').css('visibility','visible');
  }
}  

希望这可能会有所帮助..