从 Select 选项触发表格

Question

我的目标是在单击子类别选项时触发隐藏表单。我可以直接使用类别选项触发表单，如类别->点击->表单打开

但我想做的是

分类->点击->子分类->点击->打开表单。子类别未触发表单。

<script>      
  $(function() {
        $('#selection').change(function(){
            $('.form').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>  



<div class="container">
   <!--CATAGORIES WITH SUB-CATAGORIES-->
    <div class="row">
       <!--MASTER CATAGORY-->
        <div class="col-md-4 col-md-offset-2">
            <div class="form-group">
              <label>Problem Catagory</label>
              <select class="form-control" id="selection">
                <option>--SELECT ANY OPTION--</option>
                <option value="3g">3G RELATED COMPLAIN</option>
                <option value="bill_adjust">BILL ADJUSTMENT</option>
                <option value="bill_recieve">BILL RECIEVING PROBLEM</option>
                <option value="credit_control">CREDIT CONTROL PROBLEM</option>
                <option value="general">GENERAL COMPLAIN</option>
                <option value="network">NETWORK COMPLAIN</option>
                <option value="payment">PAYMENT RELATED</option>
                <option value="service">SERVICE RELATED</option>
              </select>
            </div>
        </div>
        <!--SLAVE CATAGORY-->
        <div class="col-md-4">
           <div class="form-group">
               <!--3G RELATED COMPLAIN-->
                <div id="3g" class="form" style="display:none">
                   <label>Problem Sub-Catagory</label>
                    <select class="form-control">
                       <option>--SELECT ANY OPTION--</option>
                        <option value="3g1">3G SERVICE NOT WORKING</option>
                        <option value="3g2">3G PACKAGE ACTIVATION</option>
                        <option value="3g3">3G PACKAGE DEACTIVATION</option>
                    </select>
                </div>
               <!-- BILL ADJUSTMENT-->
                  <div id="bill_adjust" class="form" style="display:none">
                   <label>Problem Sub-Catagory</label>
                    <select class="form-control">
                       <option>--SELECT ANY OPTION--</option>
                        <option>FNF OVERCHARGED</option>
                        <option>OTHER OVERCHARGED ISSUE</option>
                        <option> REFIL/RECHARGE BONUS</option>
                        <OPTION>FINANCIAL ADJUSTMENTS</OPTION>
                    </select>
                  </div>
                <!-- BILL RECIEVING PROBLEM-->
                     <div id="bill_recieve" class="form" style="display:none">
                       <label>Problem Sub-Catagory</label>
                        <select class="form-control">
                           <option>--SELECT ANY OPTION--</option>
                            <option>BILL NOT RECIEVED VIA MAIL</option>
                            <option>BILL NOT RECIEVED VIA MAIL</option>
                        </select>
                      </div>
                <!-- CREDIT CONTROL PROBLEM-->
                     <div id="credit_control" class="form" style="display:none">
                       <label>Problem Sub-Catagory</label>
                        <select class="form-control">
                           <option>--SELECT ANY OPTION--</option>
                            <option>OGBAR COMPLAIN</option>            
                        </select>
                      </div>
                <!--GENERAL COMPLAIN-->
                     <div id="general" class="form" style="display:none">
                       <label>Problem Sub-Catagory</label>
                        <select class="form-control">
                           <option>--SELECT ANY OPTION--</option>
                            <option>DISTRIBUTOR/RETAILER/SALES MAN COMPLAIN</option>
                        </select>
                      </div>
                <!--NETWORK COMPLAIN-->
                     <div id="network" class="form" style="display:none">
                       <label>Problem Sub-Catagory</label>
                        <select class="form-control">
                           <option>--SELECT ANY OPTION--</option>
                            <option value="">ECHO COMPLAIN</option>
                            <option value="">CALL DROP COMPLAIN</option>
                            <option value="">OUTGOING CALL COMPLAIN</option>
                            <option value="">SMS INCOMING COMPLAIN</option>
                            <option value="">SMS OUTGOING COMPLAIN</option>
                            <option value="">INCOMING COMPLAIN</option>
                            <option value="">SIGNAL COMPLAIN</option>
                            <option value="">ISD INCOMING COMPLAIN</option>
                            <option value="">NON COVERAGE AREA</option>
                        </select>
                      </div>
                <!-- PAYMENT RELATED-->
                     <div id="payment" class="form" style="display:none">
                       <label>Problem Sub-Catagory</label>
                        <select class="form-control">
                           <option>--SELECT ANY OPTION--</option>
                            <option>UNABLE TO PAY RECHARGE ACCOUNT</option>
                            <option>PAYMENT NOT POSTED</option>
                        </select>
                      </div>

                <!--  SERVICE RELATED-->
                 <div id="service" class="form" style="display:none">
                   <label>Problem Sub-Catagory</label>
                    <select class="form-control">
                       <option>--SELECT ANY OPTION--</option>
                        <option value="">UNABLE TO DIVERT/FORWARD CALLS</option>
                        <option value="">UNABLE TO USE GPRS</option>
                        <option value="">VAS ACTIVATION COMPLAIN</option>
                        <option value="">VAS DEACTIVATION COMPLAIN</option>
                        <option value="">VAS NOT WORKING COMPLAIN</option>
                        <option value="">DELETE FNFS</option>
                    </select>
                  </div>
                <!--END Of Sub-Cqatagory-->  
           </div>
        </div>
        <br><br>
        <div class="col-md-6 col-md-offset-2">
          <!--3G RELATED COMPLAIN-->
            <div id="3g1" class="form" style="display:none">
               <form action="">
                   <form class="form-inline">
                      <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                      </div>
                      <div class="form-group">
                        <label for="exampleInputEmail2">Email</label>
                        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                      </div>
                      <button type="submit" class="btn btn-default">Send invitation</button>
                    </form>
               </form>
            </div>
        </div>
    </div>
   <!--END OF CATAGORIES WITH SUB-CATAGORIES-->

<!--TRIGGERED FORM SECTION-->


</div>

Answer 1

表单未被触发，因为您没有触发它的脚本。您需要向子类别添加触发器 SELECT - 请参阅下面的代码段。

$(function() {
  $('#selection').change(function() {
    $('.form').hide();
    $('#' + $(this).val()).show();
    $('#' + $(this).val()).unbind();
    $('#' + $(this).val()).change(function() {

      $("#3g1").show();
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="container">
  <!--CATAGORIES WITH SUB-CATAGORIES-->
  <div class="row">
    <!--MASTER CATAGORY-->
    <div class="col-md-4 col-md-offset-2">
      <div class="form-group">
        <label>Problem Catagory</label>
        <select class="form-control" id="selection">
          <option>--SELECT ANY OPTION--</option>
          <option value="3g">3G RELATED COMPLAIN</option>
          <option value="bill_adjust">BILL ADJUSTMENT</option>
          <option value="bill_recieve">BILL RECIEVING PROBLEM</option>
          <option value="credit_control">CREDIT CONTROL PROBLEM</option>
          <option value="general">GENERAL COMPLAIN</option>
          <option value="network">NETWORK COMPLAIN</option>
          <option value="payment">PAYMENT RELATED</option>
          <option value="service">SERVICE RELATED</option>
        </select>
      </div>
    </div>
    <!--SLAVE CATAGORY-->
    <div class="col-md-4">
      <div class="form-group">
        <!--3G RELATED COMPLAIN-->
        <div id="3g" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option value="3g1">3G SERVICE NOT WORKING</option>
            <option value="3g2">3G PACKAGE ACTIVATION</option>
            <option value="3g3">3G PACKAGE DEACTIVATION</option>
          </select>
        </div>
        <!-- BILL ADJUSTMENT-->
        <div id="bill_adjust" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option>FNF OVERCHARGED</option>
            <option>OTHER OVERCHARGED ISSUE</option>
            <option>REFIL/RECHARGE BONUS</option>
            <OPTION>FINANCIAL ADJUSTMENTS</OPTION>
          </select>
        </div>
        <!-- BILL RECIEVING PROBLEM-->
        <div id="bill_recieve" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option>BILL NOT RECIEVED VIA MAIL</option>
            <option>BILL NOT RECIEVED VIA MAIL</option>
          </select>
        </div>
        <!-- CREDIT CONTROL PROBLEM-->
        <div id="credit_control" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option>OGBAR COMPLAIN</option>
          </select>
        </div>
        <!--GENERAL COMPLAIN-->
        <div id="general" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option>DISTRIBUTOR/RETAILER/SALES MAN COMPLAIN</option>
          </select>
        </div>
        <!--NETWORK COMPLAIN-->
        <div id="network" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option value="">ECHO COMPLAIN</option>
            <option value="">CALL DROP COMPLAIN</option>
            <option value="">OUTGOING CALL COMPLAIN</option>
            <option value="">SMS INCOMING COMPLAIN</option>
            <option value="">SMS OUTGOING COMPLAIN</option>
            <option value="">INCOMING COMPLAIN</option>
            <option value="">SIGNAL COMPLAIN</option>
            <option value="">ISD INCOMING COMPLAIN</option>
            <option value="">NON COVERAGE AREA</option>
          </select>
        </div>
        <!-- PAYMENT RELATED-->
        <div id="payment" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option>UNABLE TO PAY RECHARGE ACCOUNT</option>
            <option>PAYMENT NOT POSTED</option>
          </select>
        </div>

        <!--  SERVICE RELATED-->
        <div id="service" class="form" style="display:none">
          <label>Problem Sub-Catagory</label>
          <select class="form-control">
            <option>--SELECT ANY OPTION--</option>
            <option value="">UNABLE TO DIVERT/FORWARD CALLS</option>
            <option value="">UNABLE TO USE GPRS</option>
            <option value="">VAS ACTIVATION COMPLAIN</option>
            <option value="">VAS DEACTIVATION COMPLAIN</option>
            <option value="">VAS NOT WORKING COMPLAIN</option>
            <option value="">DELETE FNFS</option>
          </select>
        </div>
        <!--END Of Sub-Cqatagory-->
      </div>
    </div>
    <br>
    <br>
    <div class="col-md-6 col-md-offset-2">
      <!--3G RELATED COMPLAIN-->
      <div id="3g1" class="form" style="display:none">
        <form action="" class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
          </div>
          <button type="submit" class="btn btn-default">Send invitation</button>
        </form>
      </div>
    </div>
  </div>
  <!--END OF CATAGORIES WITH SUB-CATAGORIES-->

  <!--TRIGGERED FORM SECTION-->

从 Select 选项触发表格

Trigger form from Select option

jquery

html

select

populate