移动端软键盘在Ajax填充下拉框（方向键操作时）无法更新问题

我之前处理过不少移动端下拉框联动的问题，你遇到的这个软键盘不更新的情况确实挺常见的——主要是因为动态更新select选项后，移动端浏览器的原生软键盘没跟上DOM的变化，导致方向键操作时还是显示旧内容。

先贴一下你的联动下拉框代码，方便理解场景：

<select id="country" onchange="getCity(this);">
<option value="">-- Please select your country --</option>
<option value="1">Austria</option>
<option value="2">Switzerland</option>
</select>
<select name="city" id="selectFormCity" onchange="setCity(this);">
<option value="none">-- Please select --</option>
</select>

下面给你几个经过验证的解决方案，按易用性和兼容性排序：

• 方案一：焦点重置法（最简单）
  在你的getCity函数完成Ajax填充选项后，给城市下拉框做一次“失焦→延迟聚焦”的操作，强制浏览器刷新软键盘的选项列表：

function getCity(element) {
  // 这里是你的Ajax请求逻辑，比如获取城市列表并填充到selectFormCity中
  
  const citySelect = document.getElementById('selectFormCity');
  // 先失焦，再延迟100ms聚焦，确保DOM更新完成
  citySelect.blur();
  setTimeout(() => {
    citySelect.focus();
  }, 100);
}

这个方法利用了浏览器聚焦select元素时会重新渲染软键盘选项的特性，小延迟是为了保证Ajax返回的DOM更新已经完全生效，避免操之过急。

• 方案二：替换整个Select元素（兼容性最好）
  如果焦点重置法在某些浏览器（比如旧版Safari）不管用，可以尝试直接替换整个城市下拉框的DOM元素，而不是只更新内部选项：

function getCity(element) {
  // 假设你的Ajax接口返回的是城市数组，格式比如[{value: 'vienna', text: 'Vienna'}, ...]
  fetch(`/your-city-api?countryId=${element.value}`)
    .then(res => res.json())
    .then(cityList => {
      // 创建新的select元素
      const newCitySelect = document.createElement('select');
      newCitySelect.id = 'selectFormCity';
      newCitySelect.name = 'city';
      newCitySelect.onchange = setCity;
      
      // 添加默认选项
      const defaultOpt = document.createElement('option');
      defaultOpt.value = 'none';
      defaultOpt.textContent = '-- Please select --';
      newCitySelect.appendChild(defaultOpt);
      
      // 批量添加城市选项
      cityList.forEach(city => {
        const opt = document.createElement('option');
        opt.value = city.value;
        opt.textContent = city.text;
        newCitySelect.appendChild(opt);
      });
      
      // 替换旧的select元素
      const oldCitySelect = document.getElementById('selectFormCity');
      oldCitySelect.parentNode.replaceChild(newCitySelect, oldCitySelect);
    });
}

因为是全新的DOM元素，浏览器一定会重新识别它的选项，软键盘自然会同步更新，这个方法几乎能兼容所有移动端浏览器。

• 方案三：触发重排重绘（巧妙的小技巧）
  还有一种更“hack”的方式，通过触发浏览器的重排来强制它感知select的变化：

function getCity(element) {
  // 填充选项的逻辑...
  
  const citySelect = document.getElementById('selectFormCity');
  // 先隐藏元素，强制浏览器计算布局，再恢复显示
  citySelect.style.display = 'none';
  void citySelect.offsetHeight; // 这里的void是为了避免返回值被意外使用
  citySelect.style.display = '';
}

这个方法利用了offsetHeight会触发浏览器立即重排的特性，让浏览器重新读取select的选项，从而更新软键盘。

建议你先试试方案一，不行再换方案二，大部分场景下方案一就足够解决问题了。记得在主流移动端浏览器（Chrome、Safari、微信内置浏览器）都测试一下哦。

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