根据第二个选择填充第三个 HTML 选择答案

【问题标题】：Populate third HTML select based on second select根据第二个选择填充第三个 HTML 选择
【发布时间】：2015-11-20 16:37:52
【问题描述】：

我必须根据第二个填充第三个选择。我正在尝试下面的代码。因为它是我在 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>

【问题讨论】：

我建议打开开发工具并查看这里是否有任何 javascript 错误。

标签： javascript php html mysql

【解决方案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>

【讨论】：