Question

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>

......现在问题...... 如何根据select选项值调用每个选择选项的函数，而不是输入keyup。像这样：

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

Answer 1

使用 change() 事件处理程序代替keyup()处理程序

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

Answer 2

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

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

选择选项更改时调用功能

2 个答案: