Question

我有两个输入文本框和两个无序列表，其中第一个输入框用户从第一个列表中选择一个值，并根据该值，第二个无序列表显示其选项。与HTML的选择和选项标签相同。在我的网页中，选择框已替换为输入文本框，选项值替换为无序列表。这两个列表都是从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

现在，第一个无序列表显示Table1中的Distinct cat，而基于第二个列表显示Table2中的区域。如果用户从第一个列表中选择酒店而不是基于表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>

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

要在第一个框中选择占位符，例如如果在第一个框中没有选择任何值，那么在第一个框中选择了一个猫，然后将第二个框的占位符更改为选择区域。
创建相应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;
    ?>

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

1 个答案: