title: Uncaught ReferenceError: $this is not defined ajax
body: <p>I'm very new in javascript and ajax. i want to make dynamic select option list like this.</p>
  
  <p><a href="https://i.stack.imgur.com/qELIf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qELIf.png" alt="enter image description here"></a></p>
  
  <p>but there is error like this when i try to compile using google chrome developer (press F12).</p>
  
  <p><a href="https://i.stack.imgur.com/yMwck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yMwck.png" alt="enter image description here"></a></p>
  
  <p>here is my script :</p>
  
  <pre><code>&lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-offset-3 col-lg-6"&gt;
                  &lt;h1 class="text-center"&gt;Ajax &amp; Codeigniter Select Box Dependent&lt;/h1&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="country"&gt;Country&lt;/label&gt;
                      &lt;select class="form-control" name="country" id="country"&gt;
                          &lt;option value=""&gt;Select Country&lt;/option&gt;
                          &lt;?php foreach ($countries as $country) : ?&gt; 
                              &lt;option value="&lt;?php echo $country-&gt;country_id; ?&gt;"&gt;&lt;?php echo $country-&gt;country_name; ?&gt;&lt;/option&gt;
                          &lt;?php endforeach; ?&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label for="pwd"&gt;Province:&lt;/label&gt;
                      &lt;select class="form-control" name="province" id="province" disabled=""&gt;
                          &lt;option value=""&gt;Select Province&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.row --&gt;
  
      &lt;/div&gt;
      &lt;!-- /.container --&gt;
  
      &lt;!-- jQuery Version 1.11.1 --&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="&lt;?php echo base_url() ?&gt;assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('#country').on('change',function(){
                  var country_id = $($this).val();
                  if(country_id == '')
                  {
                      $('#province').prop('disabled',true);
                  }
                  else
                  {
                      $('#province').prop('disabled',false);
                  }
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>if you know what wrong with my code, please help me.
  Thanks</p>