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会更改数据表（称为#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经过多次试用后出现错误，因为它可以在所有其他浏览器中创建奇迹，但在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

使用带有ajax搜索的选择下拉列表进行更改的jQuery

3 个答案: