Ajax搜索有两个下拉菜单

试试这样添加一个搜索按钮来执行搜索。如果不需要，可以使用change event。

你的html和脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#display").hide();
    var country ="";
    var option = "";
    $(".selectpicker").on('change', function () {
        option=$(this).val();
        myCall(option,country)
        });
    $("ul li a").on('click', function () {
        country=$(this).data("option");
        myCall(option,country)
        });
    });

function myCall(option,country){
    console.log(option+":"+country);
    if (country.length > 0 && option.length > 0) {
        $("#display").html("");
        $.ajax({
            type: "POST",
            url: "search.php",
            data: {country: country, option:option},
            success: function (data) {
                $("#display").html(data).show();
            }
        });
    }
    else {
        $("#display").html('please select both the fields').show();
   }
}
</script>

   <div class="col-md-5 col-sm-5">
        <select class="form-control selectpicker" required>
            <option value="">Select Option</option>
            <option value="Batsman">Batsman</option>
            <option value="Bowler">Bowler</option>
            <option value="AllRounder">All rounder</option>
            <option value="Wicket Keeper">Wicket Keeper</option>
        </select>
    </div>
    <div class="col-md-3 col-sm-3">

        <div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
            <input type="hidden" value="">
            <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
                <span class="bfh-selectbox-option input-medium" data-option=""></span>
                <b class="caret"></b>
            </a>
            <div class="bfh-selectbox-options">
                <input type="text" class="bfh-selectbox-filter">
                <div role="listbox">
                    <ul role="option">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="display"></div>

your search.php:我还没有测试过，如果有任何问题请随时询问。

 <?php
include('includes/db.php');
if (isset($_POST['country']) && isset($_POST['option'])) {
$country = trim($_POST['country']);
$option = trim($_POST['option']);
$query2 = mysql_query("SELECT * FROM tbl_users INNER JOIN tbl_cricketerattr on users_id = tbl_users_users_id WHERE country='$keyword'  and option='$option'");
$result= "<ul id='playerlist'>";
while ($query3 = mysql_fetch_array($query2)) {
   $result.= "<li id='list' onclick='fill()'>". $query3['first_name'].":". $query3['country']."</li>";
}
$result.= "</ul>";
echo $result;
}

对于下拉搜索，您应该使用onchange()事件进行搜索，如下所示

$(document).on("change","id or class of first dropdown",function () {
    var keyword = $(this).val();
        $.ajax({
            type: "POST",
            url: "search.php",
            data: "keyword=" + keyword,
            success: function (html) {
                $("id or class of second dropdown").html(html).show();
            }
        });        
});

如果我理解正确，你正试图使用ajax与两个下拉选项!

试试这样写:

$(document).ready(function () {
var country = $('.bfh-selectbox-filter').val();
var option = $('.selectpicker').val();
$(".selectpicker .bfh-selectbox-filter").on ('change', function () {
if (country !== '' && option !== '') {
            $.ajax({
                type: "POST",
                url: "search.php",
                data: ["country": country, "option":option],
                success: function (html) {
                    $("#display").html(html).show();
                }
            });
        }
        else {
            $("#display").html('please select both the drop downs').show();
       }
    });
});