如何在不提交表单的情况下，实现州选择联动获取城市数据？

核心逻辑很简单：监听州下拉框的选择变化事件，独立发送POST类型的AJAX请求获取城市数据，再动态更新城市下拉框，完全不需要嵌套表单，也不会触发整个表单的提交。

1. 基础HTML结构示例 #

你的主表单里只需保留州和城市的下拉框，不需要额外的表单标签：

<form id="userInfoForm">
  <!-- 其他表单字段：姓名、电话等 -->
  <div class="address-group">
    <label>选择州：</label>
    <select id="stateDropdown">
      <!-- 已预加载的州选项 -->
      <option value="">请选择</option>
      <option value="CA">加利福尼亚州</option>
      <option value="NY">纽约州</option>
    </select>

    <label>选择城市：</label>
    <select id="cityDropdown">
      <option value="">请先选择州</option>
    </select>
  </div>
  <!-- 主表单提交按钮 -->
  <button type="submit">提交所有信息</button>
</form>

2. jQuery + AJAX 实现联动逻辑 #

通过监听州下拉框的change事件，触发POST请求获取城市数据，再渲染到城市下拉框中：

$(document).ready(function() {
  // 监听州下拉框的选择变化
  $('#stateDropdown').on('change', function() {
    const selectedState = $(this).val();
    const cityDropdown = $('#cityDropdown');

    // 如果未选择州，重置城市下拉框
    if (!selectedState) {
      cityDropdown.empty().append('<option value="">请先选择州</option>');
      return;
    }

    // 发送POST请求获取城市数据
    $.ajax({
      url: '/your-city-api-endpoint', // 替换为你的实际API地址
      method: 'POST',
      data: { state_code: selectedState }, // 传递选中的州标识给后端
      dataType: 'json',
      // 请求发起前的状态处理（可选优化）
      beforeSend: function() {
        $('#stateDropdown').prop('disabled', true);
        cityDropdown.empty().append('<option value="">加载中...</option>');
      },
      // 请求成功后的处理
      success: function(response) {
        cityDropdown.empty().append('<option value="">请选择城市</option>');
        // 遍历返回的城市列表，添加选项
        $.each(response.cities, function(idx, city) {
          cityDropdown.append(`<option value="${city.id}">${city.name}</option>`);
        });
      },
      // 请求失败后的处理
      error: function(xhr, errMsg, err) {
        cityDropdown.empty().append('<option value="">城市加载失败，请重试</option>');
        console.error('城市API请求出错:', err);
      },
      // 请求完成后恢复州下拉框可用状态
      complete: function() {
        $('#stateDropdown').prop('disabled', false);
      }
    });
  });
});

3. 关键注意事项 #

• 后端API需要支持POST请求，接收你传递的州参数（比如state_code），并返回格式为JSON的城市列表（示例结构：{ "cities": [{ "id": 1, "name": "洛杉矶" }, ...] }）。
• 整个流程和主表单提交完全独立，AJAX请求不会触发表单的submit事件，所以其他表单字段的内容不会被提交。
• 可以根据需求添加加载状态、错误提示等交互细节，提升用户体验。

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