Question

我需要使用ajax搜索两个下拉框。我的主要文件是

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

这是我的search.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;}

请帮助!!

Answer 1

尝试这种方式添加搜索按钮以执行搜索。如果您不想要，可以使用更改事件。

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

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

Answer 2

如果我理解正确，你试图使用带有两个下拉选项的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();
       }
    });
});

Answer 3

对于带下拉菜单的搜索，您应该使用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();
            }
        });        
});

检查here，它会对你有帮助。

Ajax搜索有两个下拉列表

3 个答案: