未捕获的ReferenceError：$ this未定义为ajax

Question

I'm very new in javascript and ajax. i want to make dynamic select option list like this.

but there is error like this when i try to compile using google chrome developer (press F12).

here is my script :

<div class="container">

        <div class="row">
            <div class="col-md-offset-3 col-lg-6">
                <h1 class="text-center">Ajax & Codeigniter Select Box Dependent</h1>
                <div class="form-group">
                    <label for="country">Country</label>
                    <select class="form-control" name="country" id="country">
                        <option value="">Select Country</option>
                        <?php foreach ($countries as $country) : ?> 
                            <option value="<?php echo $country->country_id; ?>"><?php echo $country->country_name; ?></option>
                        <?php endforeach; ?>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="pwd">Province:</label>
                    <select class="form-control" name="province" id="province" disabled="">
                        <option value="">Select Province</option>
                    </select>
                  </div>
            </div>
        </div>
        <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="<?php echo base_url() ?>assets/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#country').on('change',function(){
                var country_id = $($this).val();
                if(country_id == '')
                {
                    $('#province').prop('disabled',true);
                }
                else
                {
                    $('#province').prop('disabled',false);
                }
            });
        });
    </script>
</body>

</html>

if you know what wrong with my code, please help me. Thanks

Answer 1

There is a typo, most probably:

$('#country').on('change',function(){
    var country_id = $($this).val();
    //                 ^ Remove this $ sign
    ...
})

Replace $($this) with $(this), because you didn't define $this. this (without $) is the context.

---

Also, as an improvement, you can remove the if and the repetitive code by doing:

$('#country').on('change',function(){
  var country_id = $(this).val();
  $('#province').prop('disabled', country_id == '');
});

Furthermore, you can do directly:

$('#country').on('change',function(){
  $('#province').prop('disabled', this.value == '');
});