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 
        },
    ...
})