select下拉选中美国时显示州选择div，页面加载状态异常如何修复？

你当前的州选择框显示隐藏逻辑仅绑定了国家下拉框的change事件，只会在手动切换选项时触发，页面初始化阶段没有执行该判断，因此初始显示状态不符合预期。

你可以将判断逻辑抽为公共函数，在DOM加载完成后先执行一次完成初始化，再绑定到change事件即可，修改后的代码如下：

$(document).ready(function() {
  // 抽离公共的状态切换函数
  function toggleUsState() {
    const selectedCountry = $("#us-state select").val();
    if (selectedCountry === 'US') {
      $('.us-state-select').show();
    } else {
      $('.us-state-select').hide();
    }
  }

  // 页面加载完成先执行一次，初始化显示状态
  toggleUsState();
  // 绑定切换事件，切换国家时重新判断
  $("#us-state select").change(toggleUsState);
});

可选优化 #

为了避免页面刚加载、JS还未执行时，州选择框出现短暂闪现的问题，你可以直接给.us-state-select元素加上Bootstrap自带的d-none隐藏类，配合修改逻辑使用Bootstrap的类操作更符合框架规范：

1. 修改HTML部分的州选择框容器：

<div class="col-sm mb-5 us-state-select d-none">
  <label>USA STATE</label>
  <select name="order_from_address_state" class="form-select">
    <!-- 原有选项保持不变 -->
  </select>
</div>

2. 对应调整JS逻辑：

$(document).ready(function() {
  function toggleUsState() {
    const selectedCountry = $("#us-state select").val();
    // 第二个参数为true时添加d-none类，为false时移除该类
    $('.us-state-select').toggleClass('d-none', selectedCountry !== 'US');
  }
  toggleUsState();
  $("#us-state select").change(toggleUsState);
});

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