jQuery的onChange函数在下拉列表中不起作用

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将if == 10更改为if === '10'。其他如果条件相同。这是因为选项值在字符串

中

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;