表单State选择始终返回rid=7且Region无法通过AJAX自动填充

问题1：选中任意State时rid始终为7的解决办法 #

问题出在JavaScript获取下拉框值的方式错误：jQuery(state1)未使用ID选择器，导致无法正确获取选中项的值，始终拿到初始选项的rid。

修改JavaScript中的值获取代码：

// 原错误代码
// var rid = jQuery(state1).val();

// 修改后（使用ID选择器）
var rid = jQuery('#state1').val();
// 或原生JS写法
// var rid = document.getElementById('state1').value;

同时，给更新表单的初始State选项添加selected属性，确保默认选中当前数据对应的State：

<option value="<?php echo htmlentities($result->rid);?>" selected><?php echo htmlentities($result->statename);?></option>

问题2：AJAX返回结果无法填充Region下拉框的解决办法 #

步骤1：确保后端返回正确的选项格式 #

get_data.php需要返回完整的<option>标签（而非纯文本），示例代码如下：

<?php
// 替换为你的数据库连接配置
$dbh = new PDO('mysql:host=localhost;dbname=你的数据库名', '用户名', '密码');

if (isset($_POST['id'])) {
    $rid = $_POST['id'];
    // 预处理查询防止SQL注入
    $stmt = $dbh->prepare("SELECT region FROM tblregion WHERE rid = ?");
    $stmt->execute([$rid]);
    $regionData = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($regionData) {
        // 转义内容避免XSS
        $region = htmlentities($regionData['region']);
        echo "<option value='$region'>$region</option>";
    } else {
        echo "<option>未找到对应区域</option>";
    }
}
?>

步骤2：修正前端填充逻辑 #

如果后端返回正确的<option>标签，当前的jQuery('#region').html(result)即可正常工作；若后端返回纯文本，需手动拼接option标签：

success: function (result) {
    // 后端返回<option>标签时用这行
    jQuery('#region').html(result);
    
    // 后端返回纯文本时替换为这行
    // jQuery('#region').html(`<option value="${result}">${result}</option>`);
}

另外，<select>标签的readonly属性兼容性差，若要禁止用户修改Region，建议替换为disabled；但disabled的表单元素值无法提交，需额外添加隐藏input存储值：

<!-- 修改Region的select -->
<select class="form-control" name="Region" id="region" disabled>
    <option>Region</option>
</select>
<!-- 添加隐藏input用于提交值 -->
<input type="hidden" name="Region" id="region-hidden">

在AJAX的success函数中同步更新隐藏input的值：

success: function (result) {
    jQuery('#region').html(result);
    var regionValue = jQuery('#region').val();
    jQuery('#region-hidden').val(regionValue);
}

修改后的完整代码 #

HTML/PHP部分 #

<div class="col-md-4 form-group" style="padding-right:0px;" >
    <div class="form-group">
        <label for="Region" >State</label>
        <?php 
        $sql="select rid,statename,region from tblregion order by statename";
        $stmt=$dbh->prepare($sql);
        $stmt->execute();
        $arrstate=$stmt->fetchAll(PDO::FETCH_ASSOC);
        ?>
        <select class="form-control" name="state" id="state1" onchange="onStateChange()">
            <option value="<?php echo htmlentities($result->rid);?>" selected><?php echo htmlentities($result->statename);?></option>
            <?php foreach($arrstate as $state): ?>
            <option value="<?php echo $state['rid']?>"><?php echo $state['statename']?></option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

<div class="col-md-2 form-group" style="padding-left:0px;">
    <label for="Region" >Region</label>
    <select class="form-control" name="Region" id="region" disabled>
        <option>Region</option>
    </select>
    <input type="hidden" name="Region" id="region-hidden">
</div>

JavaScript部分 #

<script>
  function onStateChange() {
    var rid = jQuery('#state1').val();
    jQuery.ajax({
      type: "post",
      url: "get_data.php",
      data: "id=" + rid,
      success: function (result) {
        jQuery('#region').html(result);
        var regionValue = jQuery('#region').val();
        jQuery('#region-hidden').val(regionValue);
      },
    });
  }
</script>

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