API查询填充下拉列表时保留默认选项的问题求助

核心原因 #

你遇到的问题本质是API请求完成后，渲染代码会清空select的所有现有内容（包括默认选项），再填充新选项，导致默认项被覆盖。下面是几种直接可行的解决方法：

方法1：渲染数据前先插入默认选项 #

修改你的getPatients函数，在生成API数据对应的选项前，先重置select内容并添加默认选项，再追加数据选项：

function getPatients() {
  // 替换成你的API地址
  fetch('/api/patients')
    .then(res => res.json())
    .then(patients => {
      const select = document.getElementById('patientSelect');
      // 先设置默认选项，清空原有内容
      select.innerHTML = '<option value="">--Make a Selection--</option>';
      // 循环添加API返回的患者选项
      patients.forEach(patient => {
        const option = document.createElement('option');
        option.value = patient.id;
        option.textContent = patient.name;
        select.appendChild(option);
      });
    })
    .catch(err => console.error('获取患者数据失败:', err));
}

方法2：保留原有默认选项，仅删除动态生成的选项 #

如果你的HTML里已经预先写好了默认选项：

<select id="patientSelect">
  <option value="">--Make a Selection--</option>
</select>

可以修改渲染逻辑，只删除默认项之外的所有子元素，再添加新数据：

function getPatients() {
  fetch('/api/patients')
    .then(res => res.json())
    .then(patients => {
      const select = document.getElementById('patientSelect');
      // 保留第一个默认选项，移除其他所有选项
      while (select.children.length > 1) {
        select.removeChild(select.lastChild);
      }
      // 追加新选项
      patients.forEach(patient => {
        const option = document.createElement('option');
        option.value = patient.id;
        option.textContent = patient.name;
        select.appendChild(option);
      });
    })
    .catch(err => console.error('获取患者数据失败:', err));
}

方法3：字符串拼接时包含默认选项 #

如果你的渲染逻辑是用字符串拼接所有选项再赋值给innerHTML，直接把默认选项和数据选项拼接在一起：

function getPatients() {
  fetch('/api/patients')
    .then(res => res.json())
    .then(patients => {
      const select = document.getElementById('patientSelect');
      let optionsHtml = '<option value="">--Make a Selection--</option>';
      // 拼接患者选项
      patients.forEach(patient => {
        optionsHtml += `<option value="${patient.id}">${patient.name}</option>`;
      });
      select.innerHTML = optionsHtml;
    })
    .catch(err => console.error('获取患者数据失败:', err));
}

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