ドロップダウン時のjQueryのonChange関数が機能しない

Question

単純なjQueryを使用しようとしています。最初のドロップダウンに適用したい、いくつかの値を与え、ドロップダウン値が変更されたときにテキストボックスを変更します。しかしそれはうまくいかず、以下は私のjQueryコードです。このフォームはモデルにありますが、私が適用したjQueryはページのフッターにあります。 if === '10'へ

$("#ddl").change(function() { 
 
    var end = this.value; 
 
    alert(end); 
 
    var f = $('#ddl').val(); 
 
    if (f == 10) { 
 
    $("#cl").css("display", "none"); 
 
    $("#cl1").css("display", "none"); 
 
    } 
 
    if (f == 11) { 
 
    $("#cl").css("display", "block"); 
 
    $("#cl1").css("display", "none"); 
 
    } 
 
    if (f == 12) { 
 
    $("#cl1").css("display", "block"); 
 
    $("#cl").css("display", "none"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Modal Starts Here --> 
 
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times; 
 
</button> 
 
     <h4 class="modal-title">Payment Details</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form method="POST"> 
 
      <input type="hidden" name="std_id" value="<?php echo 
 
$data['id']; ?>"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon">Payment Method</span> 
 
      <select name="method" class="form-control" id="ddl"> 
 
       <option value="">select payment method</option> 
 
       <option value="10">Cash</option> 
 
       <option value="11">Check</option> 
 
       <option value="12">Online</option> 
 
      </select> 
 
      </div> 
 
      <br> 
 
      <div style="display: none;" id="cl"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Bank Name</span> 
 
       <input type="text" name="bank" placeholder="bank name" class="form-control"> 
 
      </div> 
 
      <br> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Cheque Number</span> 
 
       <input type="text" name="amount" placeholder="cheque 
 
number here" class="form-control"> 
 
      </div> 
 
      <br> 
 
      </div> 
 
      <div style="display: none;" id="cl1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Transaction 
 
Number</span> 
 
       <input type="text" name="trans" placeholder="transaction number here" class="form-control"> 
 
      </div> 
 
      <br> 
 
      </div> 
 
      <button class="btn btn-success" type="submit" name="pay">Add</button> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

変更if == 10。他のif条件にも同じです。オプション値が文字列で

$("#ddl").change(function() { 
 
    var end = this.value; 
 
    alert(end); 
 
    var f = $('#ddl').val(); 
 
    if (f === '10') { 
 
    console.log('10 selected') 
 
    $("#cl").css("display", "none"); 
 
    $("#cl1").css("display", "none"); 
 
    } 
 
    if (f === '11') { 
 
    $("#cl").css("display", "block"); 
 
    $("#cl1").css("display", "none"); 
 
    } 
 
    if (f === '12') { 
 
    $("#cl1").css("display", "block"); 
 
    $("#cl").css("display", "none"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Modal Starts Here --> 
 
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times; 
 
</button> 
 
     <h4 class="modal-title">Payment Details</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form method="POST"> 
 
      <input type="hidden" name="std_id" value="<?php echo 
 
$data['id']; ?>"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon">Payment Method</span> 
 
      <select name="method" class="form-control" id="ddl"> 
 
       <option value="">select payment method</option> 
 
       <option value="10">Cash</option> 
 
       <option value="11">Check</option> 
 
       <option value="12">Online</option> 
 
      </select> 
 
      </div> 
 
      <br> 
 
      <div style="display: none;" id="cl"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Bank Name</span> 
 
       <input type="text" name="bank" placeholder="bank name" class="form-control"> 
 
      </div> 
 
      <br> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Cheque Number</span> 
 
       <input type="text" name="amount" placeholder="cheque 
 
number here" class="form-control"> 
 
      </div> 
 
      <br> 
 
      </div> 
 
      <div style="display: none;" id="cl1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Transaction 
 
Number</span> 
 
       <input type="text" name="trans" placeholder="transaction number here" class="form-control"> 
 
      </div> 
 
      <br> 
 
      </div> 
 
      <button class="btn btn-success" type="submit" name="pay">Add</button> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>