基于数据库联动的下拉框实现标签值动态切换需求及代码尝试

我来帮你搞定这个联动下拉框的问题，先梳理下你现有代码里的几个核心问题，再给出修复后的完整实现：

现有代码的关键问题 #

• 废弃的MySQL扩展：你用的mysql_*函数已经在PHP 7+中被彻底移除，会导致兼容性报错，应该改用mysqli_*或PDO操作数据库。
• 未初始化的数据库连接：com_txt.php里直接使用$con变量但没建立连接，会触发PHP错误。
• 下拉框选项无显示文本：你的<option>只设置了value，没有可见的文本内容，用户根本看不到可选选项。
• 缺失联动逻辑函数：下拉框onchange调用的kota()函数完全没定义，无法触发异步请求获取数据。
• SQL注入风险：直接把用户提交的$_POST['alamat']拼进SQL语句，没有做转义处理，存在安全漏洞。
• 无效的标签属性：<label>标签不需要value属性，这个属性是给表单控件用的，直接输出内容即可。

修复后的完整代码 #

1. com_txt.php（前端页面）

<!DOCTYPE html>
<html>
<title>Test Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<label> Jalan: </label>
<select name="alamat" id="alamat">
<option value=""> --Items -- </option>
<?php
// 初始化mysqli数据库连接
$conn = mysqli_connect('localhost', 'root', 'root', 'test');
if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}
// 查询下拉框选项并渲染
$j1 = mysqli_query($conn, 'select * from alamat order by id ASC');
while ($jalan = mysqli_fetch_row($j1)) {
    // 同时设置value和可见文本，用htmlspecialchars防止XSS
    echo '<option value="' . htmlspecialchars($jalan[1]) . '">' . htmlspecialchars($jalan[1]) . '</option>';
}
?>
</select>
</br>
<label> kota:</label>
<div id="kota"> <b> label</b></div>

<script>
// 用jQuery实现AJAX联动逻辑
$(document).ready(function() {
    $('#alamat').change(function() {
        var selectedValue = $(this).val();
        // 选择默认选项时重置显示
        if (selectedValue === "") {
            $('#kota').html('<b>label</b>');
            return;
        }
        // 发送异步请求到后端
        $.ajax({
            url: 'kota.php',
            type: 'POST',
            data: { alamat: selectedValue },
            success: function(response) {
                // 更新显示区域内容
                $('#kota').html(response);
            },
            error: function() {
                $('#kota').html('<b>获取数据失败</b>');
            }
        });
    });
});
</script>
</body>
</html>

2. kota.php（后端接口）

<?php
// 初始化mysqli连接
$conn = mysqli_connect('localhost', 'root', 'root', 'test');
if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 验证并处理请求参数
if (isset($_POST['alamat'])) {
    // 转义用户输入，防止SQL注入
    $alamat = mysqli_real_escape_string($conn, $_POST['alamat']);
    // 执行查询（假设$data[2]是你要显示的目标字段）
    $query = mysqli_query($conn, "select * from alamat where jalan='$alamat'");
    if (mysqli_num_rows($query) > 0) {
        $data = mysqli_fetch_array($query);
        // 输出处理后的内容，防止XSS
        echo '<b>' . htmlspecialchars($data[2]) . '</b>';
    } else {
        echo '<b>无匹配数据</b>';
    }
} else {
    echo '<b>请选择有效选项</b>';
}
// 关闭数据库连接
mysqli_close($conn);
?>

修复说明 #

1. 替换了废弃的mysql_*函数为mysqli_*，确保在PHP 7+版本正常运行。
2. 修复了下拉框选项无显示文本的问题，用户现在能看到并选择选项。
3. 用jQuery AJAX实现了无刷新联动逻辑，替代了原来未定义的kota()函数。
4. 增加了输入验证和转义处理，防止SQL注入和XSS攻击。
5. 把显示区域从<label>改成了<div>，因为label的语义是关联表单控件，用来纯显示内容更合适。

内容的提问来源于stack exchange，提问作者Mahmood Abdullah