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/

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

希望这可能有所帮助..

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

2 个答案: