表单联动时下拉框选项不更新怎么办？

端木爱棋提问于 2026-03-08 15:43:18 阅读 116

交互

我在做省市区三级联动，选了省份后，城市下拉框没反应，明明数据已经拿到了。我用的是原生JS监听change事件，然后动态修改select的innerHTML，但页面就是不刷新。

试过console.log确认数据没问题，也试过把innerHTML换成appendChild，还是不行。是不是哪里没触发重绘？

document.getElementById('province').addEventListener('change', function() {
  const cities = fetchData(this.value); // 返回数组如 ['杭州', '宁波']
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = cities.map(c => <option value="${c}">${c}</option>).join('');
});

我来解答赞 1 收藏

反馈

1 条解答

萌新.昕彤 Lv1

你这种写法其实效率不太行，而且确实容易遇到重绘问题。我建议这么改：

1. 先缓存DOM元素，别每次都去getElementById
2. 用document.createDocumentFragment()来批量操作DOM，比直接改innerHTML性能好
3. 最后再一次性插入到select里

改完的代码长这样：

const province = document.getElementById('province');

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

const fragment = document.createDocumentFragment();



province.addEventListener('change', function() {

  const cities = fetchData(this.value);

  

  // 先清空现有选项

  while (citySelect.firstChild) {

    citySelect.removeChild(citySelect.firstChild);

  }

  

  cities.forEach(city => {

    const option = document.createElement('option');

    option.value = city;

    option.textContent = city;

    fragment.appendChild(option);

  });

  

  citySelect.appendChild(fragment);

});

这招我用了好几年了，性能杠杠的。另外检查下你的fetchData是不是真的返回了数组，有时候异步回调里console.log看着有数据但其实还没返回。

2026-03-08 16:00