jQuery onChange函数在下拉菜单中不起作用

Question

我正在尝试使用一些简单的jQuery，我想将其应用于第一个下拉列表，我给出了一些值，并且当下拉列表值更改时，它会更改文本框。 但它不起作用，下面是我的jQuery代码。 这种形式在模型中，但是我应用的jQuery在页面的页脚中。

 $("#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 === '10' 。 其他条件相同。 这是因为选项值在字符串中

 $("#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>