点击模态框内objectart单选框如何联动更新objecttype div数据

步骤1：创建AJAX后端接口 #

新建ajax_get_subtyp.php文件，用于接收前端传递的objektart_id，返回对应的Objecttype选项HTML：

<?php
// 引入公共函数文件，确保getObjektartSubtyp函数可用，请根据实际项目路径调整引入路径
include 'myFunction.php';

// 校验参数合法性，防止SQL注入
$objektart_id = isset($_POST['objektart_id']) ? intval($_POST['objektart_id']) : 0;
if ($objektart_id <= 0) {
    echo '';
    exit;
}

// 调用已有函数获取选项HTML并返回
echo getObjektartSubtyp($objektart_id);
?>

优化提示：原函数的SQL拼接存在注入风险，建议修改为预处理查询：

$sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ?';
$stmt = $db->prepare($sql);
$stmt->execute([$ids]);
$result = $stmt->fetchAll();

步骤2：编写前端JS交互逻辑 #

在模态框所在页面（Modal.php）引入jQuery（未引入可先添加jQuery依赖），然后添加如下监听代码：

$(function(){
    // 监听objektart_id单选框的变更事件
    $('input[name="objektart_id"]').on('change', function(){
        // 获取选中的objektart_id
        let selectedId = $(this).val();
        let $objekttypContainer = $('#objekttyp');
        
        // 可选：添加加载状态提示
        $objekttypContainer.find('.search-objektart-subtyp').remove();
        $objekttypContainer.append('<label class="col-md-12 col-form-label">加载中...</label>');
        
        // 发送AJAX请求，请根据实际路径调整接口URL
        $.ajax({
            url: 'ajax_get_subtyp.php',
            type: 'POST',
            data: {objektart_id: selectedId},
            success: function(res){
                // 先清除原有选项和加载提示
                $objekttypContainer.find('.search-objektart-subtyp, label:contains("加载中")').remove();
                // 插入新的选项
                $objekttypContainer.append(res);
            },
            error: function(){
                $objekttypContainer.find('label:contains("加载中")').text('加载失败，请重试');
            }
        })
    })
})

步骤3：功能验证 #

• 打开模态框，切换不同的objektart单选框，观察右侧Objecttype区域是否自动更新为对应分类的选项
• 提交表单时确认选中的checkbox值能正常传递即可

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