如何通过使用jquery选择选项来显示和隐藏表单

Question

---

我想显示两种形式 第一个表格应在第一个选项和第一个选项上显示 第二个表格应显示在第二个选项的点击上 请有人帮帮我。提前谢谢。
这是我的代码：

<form class="form-horizontal" id="form" data-role="form">
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for="What">What do you want?:</label>
    <select class="selectpicker col-md-4" id="What" title="Select Any Option">
        <option id="opt1">Sell Embroidery Machine</option>
        <option id="opt2">Buy Embroidery Machine</option>
    </select>
</div>
</form>    

以下是表格：

    <form class="form-horizontal hide" id="form1" data-role="form">
<div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for=
            "Name">Name:</label>
    <div class="col-sm-4">
        <input class="form-control" id="Name" placeholder="Name"
               required="" type="text">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for=
            "surname">Sur Name:</label>
    <div class="col-sm-4">
        <input class="form-control" id="surname" placeholder=
                "Sur Name" required="" type="text">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "Contact">Contact Number:</label>
    <div class="col-sm-4">
        <input class="form-control" id="Contact" placeholder=
                "Contact Number" required="" type="tel">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for=
            "Email">Email:</label>
    <div class="col-sm-4">
        <input class="form-control" id="Email" placeholder=
                "Email Address" required="" type="email">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "Location">Where Are you located?</label>
    <div class="col-sm-4">
        <input class="form-control" id="location" placeholder=
                "Location" type="text">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "radio1">This is a qoute for:</label>
    <div class="col-sm-4" id="radio1">
        <div class="radio">
            <label><input name="optionsRadios" type="radio"> My Self</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios" type="radio"> My Business</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios" type="radio"> On Behalf of someone else</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios" type="radio"> On Behalf of another business</label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for=
            "BusinessName">Business Name:</label>
    <div class="col-sm-4">
        <input class="form-control" id="BusinessName" placeholder=
                "Business Name" type="text">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "checkbox">I would like an embroidery machine because:</label>
    <div class="col-sm-4">
        <div class="checkbox">
            <label><input id="checkbox" type="checkbox"> Embroidery
                machine is my hobby</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> I would like to start my
                business</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> I would like upgrade my
                emroidery machine</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> To Extand my business to
                include embroidery</label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "EmbExp">Embroidery Experience:</label>
    <select class=
                    "selectpicker col-md-4" id="EmbExp" title="Select Any Option">
        <option>
            Beginner Embroider (0-6 month)
        </option>
        <option>
            Intermediate Embroider (1-2 years
        </option>
        <option>
            Advanced Embroider (2+ years)
        </option>
    </select>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "IntIn">I am Intersested in:</label>
    <select class=
                    "selectpicker col-md-4" id="IntIn" title="Select Any Option">
        <option value="Home embroidery machine (R2 000-R20 000)">
            Home embroidery machine (R2 000-R20 000)
        </option>
        <option value=
                        "Combo sewing/embroidery machine (R20 000-R100 000)">
            Combo sewing/embroidery machine (R20 000-R100 000)
        </option>
        <option value=
                        "Semi-Industrial embroidery machine (R90 00-R160 000)">
            Semi-Industrial embroidery machine (R90 00-R160 000)
        </option>
        <option value=
                        "Industrial embroidery machine (R70 000-R150 000)">
            Industrial embroidery machine (R70 000-R150 000)
        </option>
        <option value=
                        "Industrial embroidery machine (R150 000-R400 000)">
            Industrial embroidery machine (R150 000-R400 000)
        </option>
    </select>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "radio2">New or Pre-owned? :</label>
    <div class="col-sm-4" id="radio2">
        <div class="radio">
            <label><input name="optionsRadios1" type="radio"> New Embroidery Machine</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios1" type="radio"> Used
                Embroidery Machine</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios1" type="radio"> Quote
                For Both New And Used Embroidery Machine</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios1" type="radio"> On
                Behalf of another business</label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "IHav">I am Intersested in:</label>
    <select class=
                    "selectpicker col-md-4" id="IHav" title="Select Any Option">
        <option value="R2 000 - R5 000">
            R2 000 - R5 000
        </option>
        <option value="R5 000 - R10 000">
            R5 000 - R10 000
        </option>
        <option value="R10 000 - R50 000">
            R10 000 - R50 000
        </option>
        <option selected="selected" value="R50 000 - R100 000">
            R50 000 - R100 000
        </option>
        <option value="R100 000 - R200 000">
            R100 000 - R200 000
        </option>
        <option value="R200 000 - R400 000">
            R200 000 - R400 000
        </option>
    </select>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "radio3">I require financing:</label>
    <div class="col-sm-4" id="radio3">
        <div class="radio">
            <label><input name="optionsRadios2"
                          type="radio"> Yes</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios2" type="radio"> No, I
                already have financing arranged</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios2" type="radio"> No, I
                will be paying cash</label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "Radio4">Do you already have a digitizing software
        :</label>
    <div class="col-sm-4" id="radio4">
        <div class="radio">
            <label><input name="optionsRadios3"
                          onfocus="enableField();" type="radio"> Yes</label>
        </div>
        <div class="radio">
            <label><input name="optionsRadios3" onfocus=
                    "disableField();" type="radio"> No</label>
        </div>
    </div>
</div>
<div class="form-group hide fade" id="NameOfSoft1">
    <label class="col-sm-3 control-label col-sm-offset-1" for=
            "NameOfSoft">Name Of Digitizing Software:</label>
    <div class="col-sm-4">
        <input class="form-control" id="NameOfSoft" placeholder=
                "Name" required="" type="text">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for="txtArea">Any Additional Comments:</label>
    <div class="col-sm-4">
        <textarea class="form-control" id="txtArea" placeholder="Additional Comments" rows="5"></textarea>
    </div>
</div>
<a class="btn btn-default col-sm-offset-5" href="">Submit
    Quote</a>
</form>

<br>

<form class="form-horizontal hide" id="form2" role="form"></form>

和脚本：

$(function (){

console.log('jquery loaded...');
//$('#What').change(function(){
 //   console.log($("#What option").filter(":selected"));
//});

$('#form #what #opt1').click(function(){
    console.log("Option 2 Clicked");

    if($("#form1").hasClass('hide'))
    {
        console.log("First Statement Passed...");
        if($("#form2").hasClass('in'))
        {

        console.log("Nested Statement 1 Passed...");
            $('#form2').removeClass('in');
            $('#form2').addClass('hide');
            $('#form1').removeClass('hide');
            $('#form1').addClass('in');
        }
        else
        {
        console.log("Nested Statement 2 Passed...");
            $('#form1').removeClass('hide');
            $('#form1').addClass('in');
            $('#form2').removeClass('in');
            $('#form2').addClass('hide');

        }           
    }
    else
    {
        console.log("Second Statement Passed...");
        if($("#form1").hasClass('in'))
        {
            console.log("Nested Second Statement Passed...");
            $('#form1').removeClass('in');
            $('#form1').addClass('hide');
            $('#form2').removeClass('hide');
            $('#form2').addClass('in');
        }
    }

});

$('#form #opt1').click(function (){
    console.log("Option 1 Clicked");
    //ZI70u7nfZGzr1vB5fR2N6w
    if($("#form1").hasClass('hide'))
    {
        console.log("First Statement Passed...");
        if($("#form2").hasClass('in'))
        {

        console.log("Nested Statement 1 Passed...");
            $('#form2').removeClass('in');
            $('#form2').addClass('hide');
            $('#form1').removeClass('hide');
            $('#form1').addClass('in');
        }
        else
        {
        console.log("Nested Statement 2 Passed...");
            $('#form1').removeClass('hide');
            $('#form1').addClass('in');
            $('#form2').removeClass('in');
            $('#form2').addClass('hide');

        }           
    }
    else
    {
        console.log("Second Statement Passed...");
        if($("#form1").hasClass('in'))
        {
            console.log("Nested Second Statement Passed...");
            $('#form1').removeClass('in');
            $('#form1').addClass('hide');
            $('#form2').removeClass('hide');
            $('#form2').addClass('in');
        }
    }

});
});    

Fiddle

Answer 1

检查这是否是你想要的.....更容易的方法，而不是添加类和检查类

HTML

<form>
    <div class="form-group">
    <label class="col-sm-3 control-label col-sm-offset-1" for="What">What do you want?:</label>
    <select class="selectpicker col-md-4" ititle="Select Any Option" id="myselect">
        <option id="op1">Sell Embroidery Machine</option>
        <option id="op2">Buy Embroidery Machine</option>
    </select>
</div>
</form>
<form id="formop1" class="myform">
    <span>Hi i am form1</span>
</form>

<form id="formop2" class="myform">
    <span>Hi i am form2</span>
</form>

CSS

.myform{
    display:none;
}

JS

$(document).ready(function(){
    $('#myselect').change(function(){
    var id=$('#myselect option:selected').attr('id');

    var formid="#form"+id;

    $('.myform').hide();
    $(formid).show();


});
    });

我在这里做的是为你的子表单提供一个公共类 myform ; class="myform"并将其CSS属性设置为display:none然后使用JS我使用了更改函数来选择选项并获取选择下的选项ID。如您所见，该选项的ID为id="op1"，与该选项相关的表单的ID为id="formop1"。所以基本上我在这里尝试的只是连接ID并显示各自的表格....这里有一个警告提示，供您参考...... DEMO

注意：这适用于n个选项＆amp; FORMS

Answer 2

试试这些。我在小提琴上看不到你的css或2个表格，所以给出一个简短的回答：

$( "#What" ).change(function() {

        var selectedId=$('#What option:selected').attr('id');

             if(selectedId == 'opt1')
            {
                $("#form2").hide();
                $("#form1").show();
                // You can add all ur css stuff here
            }
        else{
            $("#form1").hide();
             $("#form2").show();
            // add ur csss stuff here
        }

    });