javascript/jquery 下拉菜单选择未通过 GET 请求

Question

在我的页面中，我有一个下拉菜单，选择后我想传递一个 GET 请求。这个 GET 请求应该（理想情况下）从我的 views.py 文件中触发一个函数，并从我的数据库中返回一些数据（基于选择）。但是，下拉菜单选择时似乎并没有实际发生任何事情。

这是我为在进行选择时触发 GET 请求而编写的脚本：

<!-- AJAX Call for dropdown menu selection -->

<script type="text/javascript">
var url = $('.dropdown-menu').attr('action');
$('.dropdown-menu-option').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: url,
        data: {
            class: $('.dropdown-menu-option').val()
            },
        success: function(result) {
            alert ('pass');
        },
        error: function(result) {
            alert('fail');
        }
    });
});
</script>

这是我的模板中下拉菜单的代码：

<!-- Query based content for dropdown menu -->
            <select class="dropdown-content">
                {% if current_user_properties %}
                    {% for property in current_user_properties %}
                    <option class="dropdown-menu-option" value="{{property.id}}">{{property.name}}</option>
                    {% endfor %}
                {% else %}
                    <option>You don't have any properties</option>
                {% endif %}
            </select>

最后，这是我想在views.py中运行的函数的代码

def property_selected(request):
if request.method == 'GET':
    selection = request.GET.get('class', None)
    if selection:
        selected_data = MeterData.objects.filter(property=selection).order_by(date)
        return selected_data

如果有人可以帮助确定我遗漏了什么/做错了什么，我们将不胜感激。谢谢！！

Answer 1

$('.dropdown-menu-option') 返回一个 html 节点的集合，因为有很多元素匹配这个选择器。

因此，当您将$('.dropdown-menu-option').val() 传递给ajax 选项的数据对象的class 属性时，您并没有真正传递所选选项的值。

您可以在select.dropdown-content 上附加一个 onChange 事件并获取所选选项的值，如下所示：

$('.dropdown-content').on('change', function(e){
    var selectedOption = $(this).find(':selected').val()
    $.ajax({
    type: "GET",
    url: url,
    data: {
        class: selectedOption 
        },
    ...
})