如何在编辑时将用户已选数据回显到select下拉选择框中？

要实现编辑场景下拉框回显用户之前选择的数据，分两种常用场景来处理：

一、服务器端直接渲染（传统后端页面适用） #

后端从数据库取出用户保存的sector值，在生成HTML时，给对应value的<option>标签添加selected属性即可。

以PHP为例，修改后的代码如下（其他后端语言逻辑类似，仅语法不同）：

<div class="row">
      <div class="col-25">
        <label for="sector">1. 行业类型</label>
      </div>
      <div class="col-75">
        <select id="sector" name="sector" required>
          <option value="choose">请选择行业类型...</option>  
          <option value="National DefenceSecurity" <?php echo ($savedSector == 'National DefenceSecurity') ? 'selected' : ''; ?>>国防与安全</option>
          <option value="banking & Finance" <?php echo ($savedSector == 'banking & Finance') ? 'selected' : ''; ?>>银行与金融</option>
          <option value="Information & Communication" <?php echo ($savedSector == 'Information & Communication') ? 'selected' : ''; ?>>信息与通信</option>
          <option value="Energy" <?php echo ($savedSector == 'Energy') ? 'selected' : ''; ?>>能源</option>
          <option value="Transportation" <?php echo ($savedSector == 'Transportation') ? 'selected' : ''; ?>>交通</option>
          <option value="Water" <?php echo ($savedSector == 'Water') ? 'selected' : ''; ?>>水务</option> 
          <option value="Health services" <?php echo ($savedSector == 'Health services') ? 'selected' : ''; ?>>医疗服务</option>
          <option value="Government" <?php echo ($savedSector == 'Government') ? 'selected' : ''; ?>>政府机构</option>
          <option value="Emergency Services" <?php echo ($savedSector == 'Emergency Services') ? 'selected' : ''; ?>>应急服务</option>
          <option value="Agriculture&food" <?php echo ($savedSector == 'Agriculture&food') ? 'selected' : ''; ?>>农业与食品</option>
          <option value="Other" <?php echo ($savedSector == 'Other') ? 'selected' : ''; ?>>其他</option> 
        </select>
</div>

核心逻辑：判断每个option的value是否等于数据库中保存的值，相等则添加selected属性，让该选项默认选中。

二、前端JavaScript渲染（单页应用/异步加载场景适用） #

如果页面是前端动态渲染，先通过接口或全局变量拿到用户保存的sector值，再用JS设置下拉框的选中状态。

修改后的完整代码：

<div class="row">
      <div class="col-25">
        <label for="sector">1. 行业类型</label>
      </div>
      <div class="col-75">
        <select id="sector" name="sector" required>
          <option value="choose">请选择行业类型...</option>  
          <option value="National DefenceSecurity">国防与安全</option>
          <option value="banking & Finance">银行与金融</option>
          <option value="Information & Communication">信息与通信</option>
          <option value="Energy">能源</option>
          <option value="Transportation">交通</option>
          <option value="Water">水务</option> 
          <option value="Health services">医疗服务</option>
          <option value="Government">政府机构</option>
          <option value="Emergency Services">应急服务</option>
          <option value="Agriculture&food">农业与食品</option>
          <option value="Other">其他</option> 
        </select>
      </div>
</div>

<script>
// 替换成实际从后端获取的用户保存值
const savedSector = "banking & Finance";

const sectorSelect = document.getElementById('sector');
// 先检查值是否存在于选项中，避免无效值导致选中异常
if (sectorSelect.querySelector(`option[value="${savedSector}"]`)) {
  sectorSelect.value = savedSector;
}
</script>

逻辑说明：通过document.getElementById获取下拉框元素，直接设置其value为保存的值即可；加判断是为了防止保存的值不在选项列表中，导致下拉框回到默认状态。

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