如何使用jQuery根据API返回值动态设置select下拉框的选中值

你可以通过抽离下拉选项配置、动态匹配选中值的方式优化逻辑，不需要针对每个选项单独写判断分支，后续新增选项仅需修改配置数组即可，具体优化后代码如下：

// 提前抽离下拉选项配置，后续新增选项仅需修改该数组
const fruitOptions = [
  { value: "99", label: "Fruit", hidden: true },
  { value: "3", label: "Apple" },
  { value: "5", label: "Orange" }
]

const getKnowledgeID = (sId) => {
  axios.get(`${api}bsl?id=${sId}`)
    .then(function(res) {
      if (res.data.status == 'success') {
        const result = res.data.result
        // 动态生成option代码
        let optionHtml = fruitOptions.map(item => {
          return `<option value="${item.value}" ${item.hidden ? 'hidden' : ''}>${item.label}</option>`
        }).join('')
        const cat_type = `<select class="form-control mb-3" id="selectFruit">${optionHtml}</select>`

        $('#fruit').append(` 
          <div class="col-lg-12 md-mb-50">
            <div class="form-group row">
              <div class="col-lg-4">
                <label class="form-label"> Fruit Category</label>
                ${cat_type}
              </div>
            </div>
          </div>
        `)
        // 直接通过val方法自动匹配选中对应选项，无需手动加selected属性
        $('#selectFruit').val(result.fruit_id)
      }
    })
}

优化点说明 #

• 把下拉选项配置抽离为独立数组，后续新增、修改、删除选项仅需调整数组内容，不需要修改渲染逻辑，可扩展性大幅提升
• 取消多分支if判断，利用jQuery的val()方法直接为下拉框赋值，会自动匹配对应value的option设为选中状态，无论多少个选项都不需要修改逻辑
• 代码冗余度大幅降低，易读性和可维护性明显提升

如果你的下拉选项改动频率很低，不想单独抽离配置数组，也可以直接用固定的select模板，渲染后直接赋值即可，代码也能简化很多：

const getKnowledgeID = (sId) => {
  axios.get(`${api}bsl?id=${sId}`)
    .then(function(res) {
      if (res.data.status == 'success') {
        const result = res.data.result
        $('#fruit').append(` 
          <div class="col-lg-12 md-mb-50">
            <div class="form-group row">
              <div class="col-lg-4">
                <label class="form-label"> Fruit Category</label>
                <select class="form-control mb-3" id="selectFruit">
                  <option value="99" hidden> Fruit</option>
                  <option value="3">Apple</option>
                  <option value="5">Orange</option>
                </select>
              </div>
            </div>
          </div>
        `)
        $('#selectFruit').val(result.fruit_id)
      }
    })
}

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