带两个下拉菜单的Ajax搜索

I need to have a search to perform with two drop down box using ajax. my main file is

<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)
    });

    $(".bfh-selectbox-filter").on('blur', function () {
        country=$(this).val();
        myCall(option,country)
    });
});


function myCall(option,country){
    if (country.length > 0 && option.length > 0) {
        $.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();
    }
}

<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>

<script>
$(document).ready(function(e) {
    $(document).find(".bfh-countries input[type=hidden]").attr("name","country");
});

This is my search.php code. I need the result to display after the search button is clicked. The result have to display with the combinatin of selection from these two drop downs.

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;}

Please help!!

If I understand correctly you're trying to use ajax with two drop down options!

try something like:

$(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();
       }
    });
});

For the search with dropdown, you should do it with onchange() event, like this

$(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();
            }
        });        
});

check here, it will help you.

Try this way add a search button to perform search.If you don't want you can use change event.

your html and script:

<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: i have not tested it,see if it has any problem feel free to ask.

 <?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;
}