Call function on select option change

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:

HTML page:

<div class="large-6 columns">
    {% csrf_token %}
    <input  type="text" id="search" name="search" >
    <select id="search-results">
    </select>
</div>

Then the script:

    $(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);
}

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:

<div>

search_test: {{ val }}

{% for model in models %}
    <option value="{{ model.id }}">{{ modelaname }} ({{ model.automobile_set.count }})</option>
{% endfor %}
</div>

... 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:

<select id=search>
<option value="1">Sel1</option>
<option value="2">Sel2</option>
</select>

Answers


Use change() event handler instead of keyup() handler

$(function(){    
    $('#search').change(function() {    
        $.ajax({
            type: "POST",
            url: "/automobile/search/",
            data: {
                'search_text' : $(this).val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });    
    });    
});

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
}

you can use change event in drop down. when you change drop-down value, change event is call

$(function(){    
    $('#search-results').change(function() {    
        $.ajax({
            type: "POST",
            url: "/automobile/search/",
            data: {
                'search_text' : $(this).val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });    
    });    
});

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
} 

Need Your Help

Unity DI Inject DbContext with PerRequestLifetimeManager

c# .net entity-framework unity-container

I have the following code that initialize instances with Unity:

Where are some good examples displaying dynamic data within Express.js

node.js express html-rendering

I'm working my way through displaying various data elements from parent &amp; child data, with repeating data, paged, data, etc. I was wondering what the best sites are with tutorials or other