根据第二选择填充第三HTML选择

Question

我必须基于第二填充第三选择。 我正在尝试下面的代码。 因为这是我要首先选择DB中所有国家/地区的数据。 根据第一选择提供第二选择。

我需要根据第二选择填充第三选择。 问题是：第三个选择的第一个选项是第二个选择的第一个选项，我不知道为什么它在这里仍然存在。

show_location.php

<?php
function ShowCountries() {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name FROM countries ORDER BY name ASC");
    $countryId = '<option value="">Selecione o país</option>';
    while($country = $query->fetch(PDO::FETCH_ASSOC)) {
        $countryId .= '<option value = "'.$country['id'].'">'.$country['name'].'</option>';
    }
    echo $countryId;
}

function ShowStates($id) {
    require '../connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, country_id FROM states where country_id=$id ORDER BY name ASC");
    $stateId = '<option value="">Selecione o estado</option>';
    while($state = $query->fetch(PDO::FETCH_ASSOC)) {
        $stateId .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
    }
    echo $stateId;
}

function ShowCities($id) {
    require '../connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, state_id FROM cities where state_id=$id ORDER BY name ASC");
    $cityId = '<option value="">Selecione a cidade</option>';
    while($city = $query->fetch(PDO::FETCH_ASSOC)) {
        $cityId .= '<option value = "'.$city['id'].'">'.$city['name'].'</option>';
    }
    echo $cityId;
}

if(isset($_POST['id'])){
    ShowStates($_POST['id']);
    ShowCities($_POST['id']);
    die;
}

HTML

 <?PHP
        include 'menu.php';
        require 'PDOClasses/Accounts/account_logged_check.php';
        require 'PDOClasses/Business/show_categories.php';
        require 'PDOClasses/Location/show_location.php';
    ?>
        <script type="text/javascript">
                $(document).ready(function(){
                    $("select#stateId").attr("disabled","disabled");
                    $("select#countryId").change(function(){
                        $("select#stateId").attr("disabled","disabled");
                        $("select#stateId").html("<option>wait...</option>");
                        var id = $("select#countryId option:selected").attr('value');
                        $.post("PDOClasses/Location/show_location.php", {id:id}, function(data){
                            $("select#stateId").removeAttr("disabled");
                            $("select#stateId").html(data);
                        });
                    });
                    $("form#BusinessRegistration").submit(function(){
                        var cat = $("select#countryId option:selected").attr('value');
                        var stateId = $("select#stateId option:selected").attr('value');
                        if(cat>0 && stateId>0)
                        {
                            var result = $("select#stateId option:selected").html();
                            $("#result").html('your choice: '+result);
                        }
                        else
                        {
                            $("#result").html("you must choose two options!");
                        }
                        return false;
                    });
                });
            </script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("select#cityId").attr("disabled","disabled");
                    $("select#stateId").change(function(){
                        $("select#cityId").attr("disabled","disabled");
                        $("select#cityId").html("<option>wait...</option>");
                        var id = $("select#stateId option:selected").attr('value');
                        $.post("PDOClasses/Location/show_location.php", {id:id}, function(data){
                            $("select#cityId").removeAttr("disabled");
                            $("select#cityId").html(data);
                        });
                    });
                    $("form#BusinessRegistration").submit(function(){
                        var cat = $("select#stateId option:selected").attr('value');
                        var cityId = $("select#cityId option:selected").attr('value');
                        if(cat>0 && cityId>0)
                        {
                            var result = $("select#cityId option:selected").html();
                            $("#result").html('your choice: '+result);
                        }
                        else
                        {
                            $("#result").html("you must choose two options!");
                        }
                        return false;
                    });
                });
            </script>
            <div class="4u 12u(mobile)">
               <section class="box">
                  País<br>
                  <select name="countries" class="countries" id="countryId" tabindex="9" required>
                 <?php $sl->ShowCountries(); ?>
              </select>
           </section>
        </div>
        <div class="4u 12u(mobile)">
           <section class="box">
              Estado<br>
              <select name="states" class="states" id="stateId" tabindex="10" required>
              </select>
           </section>
        </div>
<div class="4u 12u(mobile)">
           <section class="box">
              Cidades<br>
              <select name="cities" class="cities" id="cityId" tabindex="11" required>
              </select>
           </section>
        </div>

Answer 1

不知道为什么要为此使用类，因此这里是仅使用2个函数的示例。

<?php
function ShowCountries() {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name FROM countries ORDER BY name ASC");
    $countryId = '<option value="">Selecione o país</option>';
    while($country = $query->fetch(PDO::FETCH_ASSOC)) {
        $countryId .= '<option value = "'.$country['id'].'">'.$country['name'].'</option>';
    }
    echo $countryId;
}

function ShowStates($id) {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, country_id FROM states where country_id=$id ORDER BY name ASC");
    $stateId = '<option value="">Selecione o estado</option>';
    while($state = $query->fetch(PDO::FETCH_ASSOC)) {
        $stateId .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
    }
    echo $stateId;
}
if(isset($_POST['id'])){
ShowStates($_POST['id']);
die;
}
?>

并在您的html中

<select name="countries" class="countries" id="countryId" tabindex="9" required>
         <?php ShowCountries(); ?>
      </select>