Question

我的数据库由国家和城市组成。

第一个案例 - 成功完成：

国家/地区列表会在页面加载的下拉框中填充
城市列表在页面加载 - 填充城市列表的下拉框中填充基于默认国家/地区。

第二种情况 - 无法做到：

用户更改国家/地区
城市列表将根据所选国家/地区进行更改

我知道我必须使用jQuery / Ajax。我试过，但由于缺乏编程经验，我无法解决我的问题。我的列表是从数据库而不是XML中获取的。我只需要一个快速解决方案，我需要保持简单和愚蠢。

我使用常规的PHP编码风格，而不是面向对象。

我该怎么办？任何相关的资源将不胜感激。

Answer 1

$("#country").change(function(){
    $('#city').find('option').remove().end(); //clear the city ddl
    var country = $(this).find("option:selected").text();
    alert(country);
    //do the ajax call
    $.ajax({
        url:'getCity.php'
        type:'GET',
        data:{city:country},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('city');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});

你的getCity.php中的

$country = $_GET['city'];

//do the db query here

$query  = "your query";
$result = mysql_query($query);
$temp = array();
while ($row = mysql_fetch_assoc($result)) {

 if(empty($temp))
 {
   $temp=array($row['city']);
 }
 else
 {  
   array_push($temp,$row['city']);
 }

}
echo (json_encode($temp));

Answer 2

您可以通过使用jquery的.change()方法更改选择框值来进行ajax调用。 api.jquery.com/change/

Answer 3

写入数据而不是obj。它工作得很好

Answer 4

index.php

<?php
require_once './db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

    <?php
    // In this part of the code i'm building the  select box options
    $sql = "SELECT thana FROM locations group by thana";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    ?>

    <select name="Thana" class="thana-select-box">
        <option></option>
    <?php
    while ($row = $stmt->fetch()){ ?>
        <option value="<?=$row['thana']?>"><?=$row['thana']?></option>
   <?php } ?>
    </select>

    <select name="Area" class="area-select-box">

    </select>




</body>
</html>

db.php

<?php

$username = 'your username';
$password = 'your password';
$host = 'localhost';
$dbname = 'test';

$conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password
    ,
    array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_PERSISTENT => false,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ));

get_options.php

<?php
require_once 'db.php';

$thana = $_REQUEST['thana'];

$sql = "SELECT area FROM locations where thana='$thana'";
$stmt = $conn->prepare($sql);
$stmt->execute();

$options = [];

while ($row = $stmt->fetch()){
    $options[] = $row['area'];

}

echo json_encode($options);

app.js：

$(document).ready( function(){

    $(document).on('change', '.thana-select-box', function(e){

        let fd = new FormData();
        let thana = $(this).val();
        fd.append('thana', thana);
        // In this part of the code according to the selected thana, we are going to fetch
        // the rows from the second table Area, the php will return a json structure that contains the  rows
        // or more with the  Area that belong to thana.

        $.ajax({
            url: "get_options.php",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,

            complete: function (results) {
                try {
                    let str = JSON.parse(results.responseText);
                    updateDOM(str);
                    console.log(str)
                } catch (e) {
                    console.error(e.message);
                }
            },
        });


    });




    updateDOM = (options) => {

        let areaSelectBox = $('.area-select-box');
        let options_dom = '';
        options.map((value)=>{

            options_dom += `<option value="${value}">${value}</option>`;
        });


        areaSelectBox.html ('');
        areaSelectBox.append(options_dom);


    };


});

如何使用jQuery在PHP中创建级联下拉列表

4 个答案:

index.php

db.php

get_options.php

app.js：