javascript - Jquery- 使用 Ajax 将变量传递给 PHP 的问题

Question

我有两个输入文本框和两个无序列表，在第一个输入框中，用户从第一个列表中选择一个值，第二个无序列表根据该值显示其选项。与 HTML 的 Select 和 Option 标签相同。在我的网页中，选择框已替换为输入文本框和带有无序列表的选项值。两个列表都是从 Mysql 数据库中获取的。

表 1:

Id(int)     catid(int)  cat(varchar)
1       161     Hotel
2       162     Hotel
3       163     Banquet
4       164     Farms
5       165     Farms
6       166     Resort

表 2.

Id(int)     name(varchar)  area(varchar)
161     Abc     Mall Road
162     Bcd     Fountain Chowk
163     Def     Chandni Chowk
164     Efg     Chrol Bagh
165     Fgh     Mall Road
166     Ghi     Mall Road

现在第一个无序列表显示来自表 1 的不同猫，基于第二个列表显示来自表 2 的区域。如果用户从第一个列表中选择酒店而不是基于表 1 的 catid(161,162)，则 Mall Road 和 Fountain Chowk 是第二个列表元素。 Banquet Chandni Chowk、Farms Chrol Bagh 和 Mall Road 等也是如此。

PHP:

<div class="frmSearch">
    <input type="text" class="search-box" placeholder="Select Category" />
    <div class="sbox"></div>
</div>
<div class="frmSearch1">
    <input type="text" class="search-box1" placeholder="Select Category First" />
    <div class="sbox1"></div>
</div>

Jquery

<script>
    $(document).ready(function() {
        $(".search-box").keyup(function() {
            $.ajax({
                type: "POST",
                url: "readCountry1.php",
                data: { cat: $(this).val() },
                beforeSend: function(){
                    $(".search-box").css("background","#FFF");
                },
                success: function(data) {
                    $(".sbox").show();
                    $(".sbox").html(data);
                    $(".search-box").css("background","#FFF");
                }
            });
        });
    });

    function selectCountry(val) {
        $(".search-box").val(val);
        $(".sbox").hide();
    }
</script>

readCountry1

<ul class="country-list">
    <?php
     require_once("db.php");
        if(!empty($_POST["cat"])) {
            $query ="SELECT cat FROM Table1 WHERE cat like '%$_POST[cat]%' ";
            $result = mysqli_query($mysqli, $query);
            if(!empty($result)) {
                while($row=mysqli_fetch_array($result))
                {
    ?>
                    <li onClick="selectCountry('<?php echo $row["cat"]; ?>');"><?php echo $row["cat"]; ?></li>
    <?php 
                }
            }
        }
    ?>
</ul>

第一个盒子非常适合我。但我不知道如何在第二个列表中获取值。现在我想要的是

1. 更改第一个框中选择的占位符，例如如果在第一个框中没有选择任何值，那么当在第一个框中选择一只猫时，将第二个框的占位符更改为选择区域。

2. 创建相应 catid 的区域列表。

提前致谢。

Answer 1

第一个问题的答案

在您的 selectCountry 函数中添加一些条件逻辑，如果 firstbox 中有值，则像这样更改第二个的占位符:

function selectCountry(val) {
    if(val!='' || val!=undefined){
        $('.search-box1').attr('placeholder','Choose Area');
    }else{
       $('.search-box1').attr('placeholder','Select Category Frist');
    }
    $(".search-box").val(val);
    $(".sbox").hide();
}

第二个选项的答案

现在，如果您想根据选择查找区域，那么您必须发送 ajax 请求，就像发送查找国家/地区列表一样。在您的 selectCountry 函数中为 ajax 编写一些代码:

 function selectCountry(val) {
    if(val!='' || val!=undefined){
        $('.search-box1').attr('placeholder','Choose Area');
        $.ajax({
            type: "POST",
            url: "area.php",
            data: { cat: val },
            success: function(data){
                ///////show your result require portion/////////
            }
        });
    }else{
       $('.search-box1').attr('placeholder','Select Category Frist');
    }
    $(".search-box").val(val);
    $(".sbox").hide();
}

在 Area.php 页面中编写您的查询

 <?php
     $li = '';
     require_once("db.php");
        if(!empty($_POST["cat"])) {
           $li = '<ul class="area-list">';
            $query ="SELECT cat FROM Table2 WHERE id = '$_POST[cat]' ";
            $result = mysqli_query($mysqli, $query);
            if(!empty($result)) {
                while($row=mysqli_fetch_array($result))
                {
                    $li .= '<li>'.$row["area"].'</li>';
                }
            }
           $li .= '</ul>';
        }
echo $li;
    ?>