如何根据国家名称而不是 ID 创建动态下拉列表答案

【问题标题】：How To create Dynamic dropdown list based on Country name not ID如何根据国家名称而不是 ID 创建动态下拉列表
【发布时间】：2021-11-21 07:44:27
【问题描述】：

我需要你的帮助我在网上找到了一堆示例如何根据国家 ID 创建动态下拉列表，但我需要根据国家名称创建一个，所以如果我创建这样的表格会怎样

# Create countries table
CREATE TABLE countries(
    id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    country_name varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
# Inserting data in countries table
INSERT INTO `countries` (`id`, `country_name`) VALUES
    (1, 'United State'),
    (2, 'India'),
    (3, 'United Kingdom');

# Create states table
CREATE TABLE states(
    id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    country_id int(11) NOT NULL,
    state_name varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
     
# Inserting data in states table
INSERT INTO `states` (`id`, `country_id`, `state_name`) VALUES
    (1, 'United State', 'California'),
    (2, 'United State', 'Florida'),
    (3, India, 'Gujarat'),
    (4, India, 'Rajasthan'),
    (5, United Kingdom, 'Teignbridge'),
    (6, United Kingdom, 'South Hams ');

# Create cities table
CREATE TABLE cities(
    id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    state_id int(11) NOT NULL,
    city_name varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
# Inserting data in countries table
INSERT INTO `cities` (`id`, `state_id`, `city_name`) VALUES
    (1, California, 'Alameda'),
    (2, California, 'Calexico'),
    (3, California, 'Belmont'),
    (4, Florida, 'Bartow'),
    (5, Florida, 'Lakeland'),
    (6, Florida, 'Melbourne'),
    (7, Gujarat, 'Ahmadabad'),
    (8, Gujarat, 'Rajkot'),
    (9, Gujarat, 'Surat'),
    (10, Rajasthan, 'Ajmer'),
    (11, Rajasthan, 'Bikaner'),
    (12, Rajasthan, 'Jodhpur'),
    (13, Teignbridge, 'Dawlish'),
    (14, Teignbridge, 'Ashburton'),

我的代码基于ID，谁是INT，但我需要基于int，谁是varchar

<?php
// Include the database connection file
include('db_config.php');
?>
 
<html>
<head>
    <title>Dynamic Dependent Select Box using jQuery, Ajax and PHP - Clue Mediator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>Dynamic Dependent Select Box - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
        <br />
        <form action="" method="post">
            <div class="col-md-4">
 
                <!-- Country dropdown -->
                <label for="country">Country</label>
                <select class="form-control" id="country">
                    <option value="">Select Country</option>
 <?php
 $query = "SELECT * FROM countries";
 $result = $con->query($query);
 if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo '<option value="'.$row['id'].'">'.$row['country_name'].'</option>';
    }
 }else{
    echo '<option value="">Country not available</option>';
 }
 ?>
                </select>
                <br />
 
                <!-- State dropdown -->
                <label for="country">State</label>
                <select class="form-control" id="state">
                    <option value="">Select State</option>
                </select>
                <br />
 
                <!-- City dropdown -->
                <label for="country">City</label>
                <select class="form-control" id="city">
                    <option value="">Select City</option>
                </select>
            </div>
        </form>
    </div>
</body>
</html>

脚本

<script type="text/javascript">
$(document).ready(function(){
    // Country dependent ajax
    $("#country").on("change",function(){
        var countryId = $(this).val();
        $.ajax({
                url :"action.php",
                type:"POST",
                cache:false,
                data:{countryId:countryId},
                success:function(data){
                    $("#state").html(data);
                    $('#city').html('<option value="">Select city</option>');
                }
        });
    });
 
    // state dependent ajax
    $("#state").on("change", function(){
        var stateId = $(this).val();
        $.ajax({
                url :"action.php",
                type:"POST",
                cache:false,
                data:{stateId:stateId},
                success:function(data){
                    $("#city").html(data);
                }
        });
    });
});
</script>

action.php

<?php
// Include the database connection file
include('db_config.php');
 
if (isset($_POST['countryId']) && !empty($_POST['countryId'])) {
    // Fetch state name base on country id
    $query = "SELECT *  
                FROM states 
                WHERE country_id = ".$_POST['countryId'];
    $result = $con->query($query);
 
    if ($result->num_rows > 0) {
        echo '<option value="">Select State</option>';
        while ($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['id'].'">'.$row['state_name'].'</option>';
        }
    } else {
        echo '<option value="">State not available</option>';
    }
} elseif(isset($_POST['stateId']) && !empty($_POST['stateId'])) {
 
    // Fetch city name base on state id
    $query = "SELECT *  
                FROM cities     
                WHERE state_id = ".$_POST['stateId'];
    $result = $con->query($query);
 
    if ($result->num_rows > 0) {
        echo '<option value="">Select city</option>';
        while ($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['id'].'">'.$row['city_name'].'</option>';
        }
    } else {
        echo '<option value="">City not available</option>';
    }
}
?>

所以要在此代码上进行什么更改以根据 varchar ID 进行搜索我还是新手，请原谅我的无知

# Create states table
CREATE TABLE states(
id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
country_id int(11) NOT NULL,
state_name varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 

    # Inserting data in states table
    INSERT INTO `states` (`id`, `country_id`, `state_name`) VALUES
    (1, 1, 'California'),
    (2, 1, 'Florida'),
    (3, 2, 'Gujarat'),
    (4, 2, 'Rajasthan'),
    (5, 3, 'Teignbridge'),
    (6, 3, 'South Hams ');

这是原始表格

【问题讨论】：

从网络上借代码是很多人开始的方式，但你必须看看它，弄清楚它在做什么以及它是如何工作的，甚至可以通过手册检查一些东西。否则，您可能会在代码中添加任何旧垃圾
良好的代码缩进将帮助我们阅读代码，更重要的是它会帮助您调试代码Take a quick look at a coding standard 为您自己的利益。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
我尝试了几天，这就是我寻求您帮助的主要原因，因为我没有得到任何结果
什么究竟不能使用给定的代码？另外，请注意，您的查询对 SQL 注入开放 - 查看准备好的语句以编写安全查询
我认为这可能只是您的困惑。在表单中，您单击下拉列表中的国家/地区名称，它将国家/地区的id 传递给查询。这就是你想要发生的事情对吗？

标签： javascript php mysqli

【解决方案1】：

假设您所要求的答案就是您需要的答案的完美世界，这个：

var countryId = $(this).val();

会变成这样：

var countryName = $("#country option[selected='selected']").text();

但是，有几点需要指出您的代码存在的问题以及为什么不应该采用这种方法。

在大多数情况下，您永远不应该在可变长度字段上连接表。 This answer 解释了为什么这是一个坏主意的大部分原因，但主要问题是能够更改文本并使现有外键无效。例如，假设您在国家/地区表中将 'United State' 更新为 'United States'。现在，您不能再将 states 表中的 'California' 和 'Florida' 链接回 countries 表，因为 country_id 字段仍然包含 'United State'。我建议切换回原来的 states 表版本。
正如 Nico 在 cmets 中提到的，您的代码使您的数据库容易受到 SQL injection attacks 的攻击。您可能会误以为使用 POST 会让您感到安全，但现实情况是有人可以轻松伪造 POST 请求并删除您的整个数据库。相反，将您的查询更改为准备好的语句，如存储过程，并将字符串连接替换为 SQL 参数。通过将表单数据作为 SQL 参数输入到查询中，而不是将查询连接在一起，您可以消除攻击者在同一行上运行自己的查询的能力。

状态示例：

CREATE PROCEDURE get_states_by_country_id(IN countryId INT(11))
BEGIN
    SELECT id,
           state_name
    FROM states
    WHERE country_id = countryId;
END

在 PHP 中调用存储过程：

$query = 'CALL get_states_by_country_id(?)';
$stmt = $con->prepare($query);
// If your parameter is a string, sanitize the data first!
$stmt->bindParam('i', $_POST['countryId']);
$stmt->execute();
$result = $stmt->get_result();

然后，您将以与当前相同的方式检索数据。完成后别忘了致电$stmt->close();。

【讨论】：

@Micheal 我试过 var countryName = $("#country option[selected='selected']").text();并通过代码更改变量名称 countryName ，它仍然没有在第二个下拉列表中获取数据
我认为脚本有问题，因为我没有在 action.php 上获得第二个值 if ($result->num_rows > 0) { echo '
您是否像我建议的那样切换到使用存储过程？如果您仍然将查询连接在一起并使用字符串 id，则必须在字符串周围的查询中添加引号：$query = "SELECT * FROM states WHERE country_id = '".$_POST['countryId']."'"; 不过，就像我说的那样，您确实应该避免这样做，因为它会离开您的数据库易受 SQL 注入攻击。