带两个下拉菜单的Ajax搜索

Question

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

Answer 1

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