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

问题描述

限时删除！！

我试图显示一种特定的形式，具体取决于投递箱的选择.这是我到目前为止的内容:HTML:

I am trying to show one specific form depending of the dropbox choice. This is what I have so far: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();
        }
    });

我想将其用于不同的联系人类型，例如获取报价"，一般查询"，发布反馈"-除非您对此有更好的想法.感谢您的时间和帮助.

I want to use it for different contact types, eg. "get a quote", "general enquiry", "post a feedback" - unless you have better idea of doing this. Appreciate your time and help.

jsfiddle:此处

jsfiddle: here

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

The problem here is that this doesn't work. It displays all forms in the same time and #selector doesn't affect the visibility of any of them at all.

推荐答案

我想这就是你要的-

$(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/

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

/编辑

这是我将如何处理(一点点重构)的方法-

Here is how I would approach this (a tad bit of refactoring) -

$(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/

这篇关于显示/隐藏表格取决于下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..