如何通過使用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> 

和腳本：

​​

Fiddle

Answer 1

檢查，如果這是你想要的.. ...更簡單的方法來做到這一點，而不是添加類和檢查c lasses

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="op1"，並且與該選項相關的表單的編號爲id="formop1"。所以基本上我想在這裏做的僅僅是串聯的ID，並顯示相應的形式....這裏是供您參考警報小提琴... DEMO

注：這適用於選項& n個表格

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 
     } 

    });