如何基于其他字段值限制表单字段输入选项（PHP MySQL）

你用$_GET['country']获取不到值的核心原因是：$_GET只能读取URL中携带的参数，而未提交表单时，前端的选择数据根本没有传递到后端。要实现不提交表单就获取国家选择值并联动城市，需要结合前端JavaScript获取本地选中值，再通过AJAX请求后端接口动态加载对应城市。

1. 前端用JavaScript获取选中的国家值 #

通过DOM操作直接读取下拉框的选中状态，无需提交表单：

// 获取国家下拉框元素
const countrySelect = document.getElementById('country');

// 监听下拉框的选择变化事件
countrySelect.addEventListener('change', function() {
  // 获取当前选中的国家值
  const selectedCountry = this.value;
  
  // 可选：打印选中值用于调试
  if (selectedCountry) {
    console.log('当前选中国家：', selectedCountry);
  }
});

2. 结合AJAX动态加载对应城市 #

接下来将选中的国家值传给后端，后端从数据库查询对应城市后返回给前端，前端再更新城市下拉框的选项。

前端AJAX代码（原生JS实现） #

修改上面的事件监听逻辑，添加AJAX请求：

const countrySelect = document.getElementById('country');
const citySelect = document.getElementById('city');

countrySelect.addEventListener('change', function() {
  const selectedCountry = this.value;

  // 如果未选择有效国家，重置城市下拉框
  if (!selectedCountry) {
    citySelect.innerHTML = '<option>City</option>';
    return;
  }

  // 创建AJAX请求实例
  const xhr = new XMLHttpRequest();
  // 指向后端处理城市查询的接口文件
  xhr.open('POST', '/get_cities.php', true);
  // 设置请求头，确保后端能正确解析参数
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  // 请求成功后的处理逻辑
  xhr.onload = function() {
    if (this.status === 200) {
      // 解析后端返回的JSON格式城市数据
      const cities = JSON.parse(this.responseText);
      
      // 清空城市下拉框，保留默认选项
      citySelect.innerHTML = '<option>City</option>';
      
      // 循环添加城市选项
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.value;
        option.textContent = city.name;
        citySelect.appendChild(option);
      });
    }
  };
  
  // 发送请求，携带选中的国家参数（编码防止特殊字符问题）
  xhr.send(`country=${encodeURIComponent(selectedCountry)}`);
});

后端PHP代码（get_cities.php） #

从数据库查询对应国家的城市，返回JSON格式数据：

<?php
// 替换为你的数据库连接信息
$conn = mysqli_connect('localhost', '数据库用户名', '数据库密码', '数据库名');

if (!$conn) {
  die('数据库连接失败: ' . mysqli_connect_error());
}

// 获取前端传递的国家值，防止SQL注入
$country = isset($_POST['country']) ? mysqli_real_escape_string($conn, $_POST['country']) : '';

$cities = [];
if ($country) {
  // 从数据库查询对应国家的城市（替换为你的表结构和字段名）
  $sql = "SELECT city_name, city_value FROM cities WHERE country = '$country'";
  $result = mysqli_query($conn, $sql);
  
  while ($row = mysqli_fetch_assoc($result)) {
    $cities[] = [
      'name' => $row['city_name'],
      'value' => $row['city_value']
    ];
  }
}

// 设置响应头为JSON格式，返回城市数据
header('Content-Type: application/json');
echo json_encode($cities);

// 关闭数据库连接
mysqli_close($conn);
?>

3. 完整整合后的HTML代码 #

将JavaScript代码放在HTML的</body>标签前，确保DOM元素加载完成后执行：

<form action="/index.php" method="post">
    <select id="country" name="country">
        <option>Country</option>
        <option value="Belgium">Belgium</option>
        <option value="Germany">Germany</option>
        <option value="The Netherlands">The Netherlands</option>
    </select>
    <br>

    <select id="city" name="city">
        <option>City</option>
        <option value="Cologne">Cologne</option>
        <option value="Berlin">Berlin</option>
        <option value="Amsterdam">Amsterdam</option>
        <option value="Antwerp">Antwerp</option>
        <option value="Brussels">Brussels</option>
        <option value="Rotterdam">Rotterdam</option>    
        <option value="Breda">Breda</option>           
        <option value="Utrecht">Utrecht</option>     
    </select>

    <input style="margin-bottom: 15px;" type="submit" value="Search!">
</form>

<script>
const countrySelect = document.getElementById('country');
const citySelect = document.getElementById('city');

countrySelect.addEventListener('change', function() {
  const selectedCountry = this.value;

  if (!selectedCountry) {
    citySelect.innerHTML = '<option>City</option>';
    return;
  }

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/get_cities.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  xhr.onload = function() {
    if (this.status === 200) {
      const cities = JSON.parse(this.responseText);
      citySelect.innerHTML = '<option>City</option>';
      
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.value;
        option.textContent = city.name;
        citySelect.appendChild(option);
      });
    }
  };
  
  xhr.send(`country=${encodeURIComponent(selectedCountry)}`);
});
</script>

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