onChange function of jQuery on dropdown not working

Question

I am trying to use some simple jQuery, I want to apply onto first dropdown,, I gave some values and when the dropdown values changes it changes the textboxes. but its not working, and below is my jQuery code. This form is in the model, but the jQuery I applied is in the footer of page.

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

Change if == 10 to if === '10'. Same for other if conditions. This is because the option value are in string

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