显示/隐藏表单取决于下拉列表

我试图根据保管箱选择显示一个特定的forms。 这是我到目前为止：HTML：

 Option 1 Option 2 Option 3  
    
​ 
    
​ 
    
​ 

和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： 这里

这里的问题是这不起作用。 它同时显示所有表单，＃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

  Option 1 Option 2 Option 3  
    
​ 
    
​ 
     

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

希望这可能有所帮助..