title: 'this' reference undefined
body: <p>onchange of the <code>select</code> I'm running the <code>get_cities_by_countyID()</code> function. In the function I wrote:</p>
  
  <pre><code>function get_cities_by_countyID(countryID) {
    var element = $(this);     
    alert (element.attr("class"));
  
    // other logic...
  
    element.closest('form').find('.cityField').html(html);
  }
  </code></pre>
  
  <p>However the <code>alert()</code> prints <code>undefined</code>. How can I fix this?</p>
  
  <pre><code>&lt;form&gt;  
    &lt;div class="col-md-5"&gt;
      &lt;label&gt;country&lt;/label&gt;
      &lt;select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this.value)"&gt;
        &lt;option value=""&gt;&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="col-md-5"&gt;
      &lt;label&gt;city&lt;/label&gt;
      &lt;select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true"&gt;
        &lt;option value=""&gt;&lt;/option&gt;
      &lt;/select&gt;   
    &lt;/div&gt;
  &lt;/form&gt; 
  </code></pre>