选择选项更改时调用函数

问题描述

Niw我有一个代码，根据输入法改变外键，并根据外键请求数据，它看起来像这样：

HTML页面：

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

然后脚本：

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

正如您在每个 keyup 上可以理解的那样，javascript 运行此函数并将我的 html 搜索文档加载到 . 这是这个html页面：

<div>

search_test: {{ val }}

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

......现在问题来了......如何根据选择选项值而不是输入keyup在每个选择选项更改上调用函数。 像这样：

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

您可以在下拉列表中使用更改事件。 当您更改下拉值时，更改事件是调用

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