WordPress中实现JS生成的州下拉框保存后显示选中值

问题核心是页面加载时，州字段默认隐藏且未触发JS初始化逻辑，导致已保存的州值无法正常显示。需要在页面加载阶段主动触发州字段生成逻辑，并传入已保存的州值。

修改步骤及代码调整 #

1. 在PHP模板中新增已保存州值的全局变量 #

在州选择框的HTML代码后，添加PHP代码输出已保存的州值，作为JS全局变量供后续使用：

<div id="stateField" style="display:none">
  <label id="stateLabel">State:</label>
  <select name="stateId" id="stateId">
  </select>
</div>
<?php
// 获取已保存的州元数据
$saved_state = trim(get_post_meta(get_the_ID(), 'stateId', true));
?>
<script>
// 全局变量存储已保存的州值
var savedState = "<?php echo esc_js($saved_state); ?>";
</script>

2. 修改JavaScript函数，支持传入默认选中值 #

调整CountryChange函数，新增参数接收默认选中的州值，替换原有仅从当前选项获取选中值的逻辑：

window.CountryChange = function (defaultState = null) {
      var countryState = [
        [
          'United States', [
            ['', 'State/Province'],
            ['AL', 'Alabama'],
            ['AK', 'Alaska'],
            ['AZ', 'Arizona'],
            ['AR', 'Arkansas'],
          ],
        ],
        [
          'Canada', [
            ['', 'State/Province'],
            ['AB', 'Alberta'],
            ['BC', 'British Columbia'],
            ['MB', 'Manitoba'],
            ['NB', 'New Brunswick'],
          ]
        ]
      ];

      var countryElement = document.getElementById('countryId');
      var stateElement = document.getElementById('stateId');
      var stateLabelElement = document.getElementById('stateLabel');
      var stateFieldElement = document.getElementById('stateField');

      if (countryElement && stateElement) {
        var listOfState = [
          ['XX', 'None']
        ];

        var currentCountry = countryElement.options[countryElement.selectedIndex].value;
        for (var i = 0; i < countryState.length; i++) {
          if (currentCountry == countryState[i][0]) {
            listOfState = countryState[i][1];
          }
        }

        if (listOfState.length < 2) {
          stateFieldElement.style.display = "none";
        } else {
          stateFieldElement.style.display = "inline-block";
        }
        
        // 优先使用传入的默认值，无默认值时再从现有选项获取
        var selectedState = defaultState || null;
        if (!selectedState) {
          for (var i = 0; i < stateElement.length; i++) {
            if (stateElement.options[i].selected === true) {
              selectedState = stateElement.options[i].value;
            }
          }
        }
        
        stateElement.options.length = 0;
        for (var i = 0; i < listOfState.length; i++) {
          stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
          if (listOfState[i][0] == selectedState) {
            stateElement.options[i].selected = true;
          }
        }
      }
    }

3. 页面加载完成后自动触发初始化 #

添加DOM加载完成事件，调用CountryChange并传入已保存的州值，完成初始化：

<script>
// 页面加载完成后执行初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  window.CountryChange(savedState);
});
</script>

原理说明 #

• 页面加载时，通过PHP读取已保存的州元数据，传递给JavaScript
• 主动触发CountryChange函数，根据当前选中的国家生成对应州选项
• 利用传入的已保存州值自动选中对应选项，并控制州字段的显示状态

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