Question

我想用两个下拉菜单来获得一些结果。如果用户更改了第一个下拉列表，则会更改第二个下拉列表中的选择选项。我可以选择要替换的选项，但事件不会在第二次下拉列表中第一次触发，但之后会逐渐触发。

我认为这是因为.html每次运行时都会创建一个新的dom，但我不知道如何阻止它。有任何想法吗？提前谢谢。

$(document).ready(function(){
        $("form[name='search_form']").change(function(event){
        if($(event.target).is("#searchregionid")){
            regionid = $("#searchregionid").val();
            searchData = "searchregionid="+regionid;
            searchFor(searchData);
            getCountrySelection(searchData);
        }
        else if($(event.target).is("select[name='searchcountryid']")){
             $("select[name='searchcountryid']").change(function(){
                $("select[name='searchcountryid'] option:selected").each(function(){
                    countryid = $("#searchcountryid").val();
                    searchData = "searchcountryid="+countryid;
                    searchFor(searchData);
                }); 
             });
        }
    });
});

function searchFor(searchData){
    $.ajax({
       type: "POST",
       url: "/s_city_index.php",
       data: searchData,
       success:function(msg){
           $(".indexList").ajaxComplete(function(event,request){
                if(msg.toString() != "searcherror")
                    $(".indexList").html(msg);
                else
                   $(".indexList").html('No matching results.');
           });
       }
   });
}

function getCountrySelection(searchData){
    $.ajax({
       type: "POST",
       url: "/s_coun_sel.php",
       data: searchData,
       success:function(msg){
           $("select[name='searchcountryid']").ajaxComplete(function(event,request){
                if(msg.toString() != "searcherror")
                    $("select[name='searchcountryid']").html(msg);                
                else
                   $("select[name='searchcountryid']").html('No matching results.');            
           });
       }
   });
}

Answer 1

这里的问题是您在成功回调中定义了ajaxComplete。 ajaxComplete函数是一个GLOBAL回调函数，它在每次调用ajax后运行。尝试更像这样的东西：

function searchFor(searchData){
    $.post("/s_city_index.php", searchData, function(msg){
        if(msg.toString() != "searcherror"){
            $(".indexList").html(msg);
        } else {
            $(".indexList").html('No matching results.');
        }
    });
}

function getCountrySelection(searchData){
    $.post("/s_coun_sel.php", searchData, function(msg){
        if(msg.toString() != "searcherror"){
            $("select[name='searchcountryid']").html(msg);                
        } else {
            $("select[name='searchcountryid']").html('No matching results.');
        }
    });
}

jquery ajax多个下拉列表事件

1 个答案: