javascript - 使用带有 ajax 搜索的选择下拉菜单进行更改的 jQuery

Question

首先，这是我的代码:

    <script>
$(document).ready(function(){

    $("#search_dropdown").on('change', function() {
        ajax_search();
    });

});

function ajax_search(){
    var search_this = $("#search_dropdown").val();
        $.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
        $("#display_results").html(data);
    });
}
</script>

我在这里想要实现的目标非常简单。我有一个包含客户列表的选择下拉列表。单击时，选择会更改数据表(称为#display_results)，而无需按按钮，这就是使用更改功能的原因。

这是可行的，但是您只能单击选择下拉列表两次，然后除非刷新页面，否则它不会再次下拉。该事件还会导致我的其他 jQuery 事件中断(例如我的菜单 Accordion 反复上下移动)，并且我不知道如何告诉该脚本仅关注手头的任务。

即使我已经删除了登录脚本，您也可以通过此链接查看错误:

https://www.summersproperty.com/dashboard3/directory/search-properties.php

点击右侧的下拉菜单几次，它就会停止工作，然后点击导航菜单项，它们就会弹起。

Answer 1

我会尝试阻止该事件进一步传播。就像这样:

$(document).ready(function(){
    $("#search_dropdown").on('change', function(e) {
        ajax_search();
        e.stopPropagation();
    });
});

Documentation