title: onChange function of jQuery on dropdown not working
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#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");
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Modal Starts Here --&gt;
  &lt;div class="modal fade" id="myModal&lt;?php echo $i;?&gt;" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;
  &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Payment Details&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form method="POST"&gt;
            &lt;input type="hidden" name="std_id" value="&lt;?php echo 
  $data['id']; ?&gt;"&gt;
            &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;Payment Method&lt;/span&gt;
              &lt;select name="method" class="form-control" id="ddl"&gt;
                &lt;option value=""&gt;select payment method&lt;/option&gt;
                &lt;option value="10"&gt;Cash&lt;/option&gt;
                &lt;option value="11"&gt;Check&lt;/option&gt;
                &lt;option value="12"&gt;Online&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div style="display: none;" id="cl"&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;Bank Name&lt;/span&gt;
                &lt;input type="text" name="bank" placeholder="bank name" class="form-control"&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;Cheque Number&lt;/span&gt;
                &lt;input type="text" name="amount" placeholder="cheque 
  number here" class="form-control"&gt;
              &lt;/div&gt;
              &lt;br&gt;
            &lt;/div&gt;
            &lt;div style="display: none;" id="cl1"&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;Transaction 
  Number&lt;/span&gt;
                &lt;input type="text" name="trans" placeholder="transaction number here" class="form-control"&gt;
              &lt;/div&gt;
              &lt;br&gt;
            &lt;/div&gt;
            &lt;button class="btn btn-success" type="submit" name="pay"&gt;Add&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data- dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>