Retrieve and display text from multiple dropdown menus without reloading page

时间:2017-04-10 03:04:11

标签: php jquery html ajax

I am learning PHP, Jquery, Ajax and other web dev languages and have been stuck on this problem for hours on end.

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. 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. My PHP is as follows:

<?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.

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
<?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
    }
}
?>
&#13;
&#13;
&#13;

您发布的只是&#39;国家&#39;并且必须得到正义的国家&#39;从帖子。这个城市不是来自邮政。