如何基于Selectbox下拉框实现输入框自动填充？现有代码无效求助

一、先排查当前脚本无反应的原因 #

你的代码目前只是把下拉框选中的id_periodik值直接赋值给输入框，但执行无反应，大概率是以下原因：

• jQuery未加载：你的脚本依赖jQuery，但页面可能没引入。必须在自定义脚本前添加jQuery引用，比如：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

• 元素ID拼写错误：检查id_periodik和jumlah_periodik的ID是否和HTML中完全一致，大小写、拼写都不能错。
• 控制台报错：按F12打开浏览器开发者工具，切换到「控制台」标签，查看是否有$ is not defined这类错误，这是jQuery未加载的典型表现。

二、实现从数据库获取数据填充输入框 #

你的核心需求是根据下拉框选中的id_periodik，从数据库获取对应的jumlah_periodik值来填充输入框，这需要通过AJAX请求后端接口实现，步骤如下：

1. 后端接口（示例：get_jumlah.php） #

创建一个PHP文件，接收前端传递的id_periodik，查询数据库并返回对应的数值：

<?php
// 连接数据库（根据你的实际配置修改）
$conn = mysqli_connect("localhost", "username", "password", "database_name");

if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 获取前端传递的id_periodik
$id_periodik = $_GET['id_periodik'];

// 查询数据库（假设表名为periodik，字段为id_periodik和jumlah_periodik）
$sql = "SELECT jumlah_periodik FROM periodik WHERE id_periodik = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "i", $id_periodik);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$row = mysqli_fetch_assoc($result);
// 返回JSON格式的数据
echo json_encode(['jumlah' => $row['jumlah_periodik'] ?? '']);

mysqli_close($conn);
?>

2. 修改前端脚本 #

更新你的JavaScript代码，使用AJAX请求后端接口，获取数据后填充输入框：

<script>
$(document).ready(function() {
    $('#id_periodik').on('change', function() {
        var selectedId = $(this).val();
        // 发送AJAX请求
        $.ajax({
            url: 'get_jumlah.php', // 后端接口路径
            type: 'GET',
            data: { id_periodik: selectedId },
            dataType: 'json',
            success: function(response) {
                // 将返回的数值填充到输入框
                $('#jumlah_periodik').val(response.jumlah);
            },
            error: function() {
                // 请求失败时的处理
                $('#jumlah_periodik').val('获取失败');
            }
        });
    });
});
</script>

3. 保留原有HTML代码 #

你的下拉框和输入框HTML代码可以保持不变，确保ID正确即可。

三、额外注意事项 #

• SQL注入防护：后端使用了预处理语句mysqli_prepare，避免SQL注入风险，不要直接拼接SQL语句。
• 空值处理：当下拉框未选中任何选项，或者数据库无对应数据时，要做好空值或错误提示的处理。

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