简体   繁体   English

从多个下拉菜单中检索和显示文本,而无需重新加载页面

[英]Retrieve and display text from multiple dropdown menus without reloading page

I am learning PHP, Jquery, Ajax and other web dev languages and have been stuck on this problem for hours on end. 我正在学习PHP,Jquery,Ajax和其他Web开发语言,并在这个问题上持续数小时。

I have two drop-down boxes: 我有两个下拉框:

  • One displaying a list of countries (via a database query) 一个显示国家列表(通过数据库查询)
  • One displaying a list of cities related to the country chosen (also via a database query) 一个显示与所选国家/地区相关的城市列表(也通过数据库查询)

Anyway, I want to be able to retrieve the text of both menu boxes and use them in further database queries in a text box on the same page at the click of a button but with no reloading of the page involved . 无论如何,我希望能够检索两个菜单框的文本,并在单击按钮的同时单击同一页面上的文本框中的文本框,以在进一步的数据库查询中使用它们,而无需重新加载页面

I have used JQuery and Ajax for the dynamic menu so I have some idea of what is required for this task. 我已经将JQuery和Ajax用于动态菜单,因此我对此任务需要什么有所了解。 Here is the code for the page in question: 这是相关页面的代码:

    <body>
    <div class = "country">
        <label>Select a Country: </label>
        <select name="country" onchange="getId(this.value);">
            <option value = "">Select Country</option>

            <?php
                $query = "SELECT DISTINCT(Country) AS Country FROM Locations ORDER BY Country ASC;";
                $results = mysqli_query($con, $query);

                foreach ($results as $country) {
                ?>
            <option value = "<?php echo $country['Country']; ?>"><?php echo 
   $country['Country'] ?></option>
                <?php
                    }
                ?>
            </select>   
        </div>  
</br>

    <div class="city">
        <label>Select a City: </label>
        <select name="city" id="cityList">
            <option value="">Select a city</option>
        </select>
    </div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
        function getId(value){
            $.ajax({
                type: "POST",
                url: "getdata.php",
                data: "Country="+value,
                success: function(data){
                    $("#cityList").html(data);          
                }
            });
        }
    </script>
   <button id="button">Go</button>

document.getElementById("button").onclick = function(){
document.getElementById("textbox").innerHTML = "<?php $query = mysqli_query($con, "SELECT * FROM Locations WHERE Country='dropdown text' AND City='dropdown text'");

while($results = mysqli_fetch_array($query)){

    echo "Name: " . "$results['City']" . "is in" . "$results['Country']" "</option>";
}
  ?>";
}
    </script>
</body>

The PHP file I have been working on so far is incomplete as I am unsure on how to echo the result, since I want it to eventually end up in the text box on the main page. 到目前为止,我一直在使用的PHP文件尚不完整,因为我不确定如何回显结果,因为我希望它最终出现在主页上的文本框中。 My PHP is as follows: 我的PHP如下:

<?php
    include_once "connection.php";
if(!empty($_POST['Country'])||($_POST['City'])){
    $country = $_POST['Country'];
    $city = "SELECT * FROM Locations WHERE Country = '$Country' AND City = '$city'";
    $results = mysqli_query($con, $query);

    foreach ($results as $city) {
    ?>
    <option value = "<?php echo $city['Country']; ?>"><?php echo $city['City'] ?></option>
    <?php
    }
}
?>

Any suggestions or advice would be greatly appreciated. 任何建议或意见,将不胜感激。

 <?php include_once "connection.php"; if(!empty($_POST['Country'])){ $country = $_POST['Country']; $city = "SELECT * FROM Locations WHERE Country = '$Country' "; $results = mysqli_query($con, $query); foreach ($results as $city) { ?> <option value = "<?php echo $city['City']; ?>"><?php echo $city['City'] ?></option> <?php } } ?> 

You are posting just 'Country' and have to get just 'country' from post. 您只发布“国家”,而必须从帖子中获取“国家”。 the city does not come from post. 这个城市不是来自邮政。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM