jQuery on change使用带有ajax搜索的select下拉菜单

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>

我在这里想要实现的非常简单。我有一个带有客户端列表的select下拉列表。单击时，select无需按下按钮即可更改数据表(称为#display_results)，这就是使用更改功能的原因。

这是可行的，但是您只需单击选择下拉菜单两次，然后它将不会再次下拉，除非刷新页面。该事件还会导致我的其他jQuery事件中断(比如我的菜单折叠面板反复上下移动)，而我不知道如何告诉这个脚本只关注手头的任务。

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

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

Answer 2

在经过反复试验之后，它确实出现了一个Chrome的bug，因为它在所有其他浏览器中都很有效，但在Chrome中点击几下就会停止。

Answer 3

$(document).ready(function(){

  $("#search_dropdown").on('change', function() {
     var search_this = $(this).find('option:selected').val();
     if(search_this !=''){
        $.post("../includes/db-search-properties.php", {searchit :    search_this}, function(data){
          $("#display_results").html(data);
        });
     }
     else{ console.log("no value found"); }
    return false; # optional
  });

});

你试过这个吗？将当前选择的值传递给ajax调用？

运行示例check this