title: Call function on select option change
body: <p>Niw I have a code, that changes the foreign key according to input method, and request data according to the foreign key, it's all looks like this:</p>
  
  <p>HTML page:</p>
  
  <pre><code>&lt;div class="large-6 columns"&gt;
      {% csrf_token %}
      &lt;input  type="text" id="search" name="search" &gt;
      &lt;select id="search-results"&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then the script:</p>
  
  <pre><code>    $(function(){
  
      $('#search').keyup(function() {
  
          $.ajax({
              type: "POST",
              url: "/automobile/search/",
              data: {
                  'search_text' : $('#search').val(),
                  'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
              },
              success: searchSuccess,
              dataType: 'html'
          });
  
      });
  
  });
  
  function searchSuccess(data, textStatus, jqXHR)
  {
      $('#search-results').html(data);
  }
  </code></pre>
  
  <p>As you can understand on every keyup javascript run this function and loads my html search document which looks like this, into . Here's this html page:</p>
  
  <pre><code>&lt;div&gt;
  
  search_test: {{ val }}
  
  {% for model in models %}
      &lt;option value="{{ model.id }}"&gt;{{ modelaname }} ({{ model.automobile_set.count }})&lt;/option&gt;
  {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>... And now comes question....
  How to call function on every select option change according to the select option values, instead of input keyup. Like this:</p>
  
  <pre><code>&lt;select id=search&gt;
  &lt;option value="1"&gt;Sel1&lt;/option&gt;
  &lt;option value="2"&gt;Sel2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>