如何在ng-options中实现Business下拉框的预选中功能

我来帮你搞定这个需求，下面分原生JavaScript和jQuery两种常见场景给出具体实现方案，你可以根据项目情况选择：

先明确基础数据与前提 #

首先我们把你给出的选项数组定义好：

const businessOptions = [
  {"code":"MA","value":"Main"},
  {"code":"TL","value":"Toll Free"},
  {"code":"AP","value":"After Hour"},
  {"code":"FX","value":"Fax"},
  {"code":"DR","value":"Direct"},
  {"code":"WB","value":"Web"},
  {"code":"EM","value":"Email"}
];

假设你的下拉框HTML是这样的（给它加个id方便操作）：

<select id="businessSelect"></select>

方案一：原生JavaScript实现 #

1. 先填充下拉框选项（如果还没做的话） #

我们先把选项数组渲染到下拉框里，同时把每个option的value设为对应的code，这样后续匹配起来更方便：

// 获取下拉框元素
const selectElement = document.getElementById('businessSelect');

// 清空现有选项（避免重复渲染）
selectElement.innerHTML = '';

// 遍历选项数组，创建并添加option元素
businessOptions.forEach(option => {
  const opt = document.createElement('option');
  opt.value = option.code;
  opt.textContent = option.value;
  selectElement.appendChild(opt);
});

2. 调用服务获取数据并设置预选中 #

页面加载完成后，调用接口拿到需要选中的code，然后匹配对应的选项设置为选中状态：

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 上面的填充选项代码也可以放在这里

  // 调用服务获取选中的code（实际项目替换成你的接口地址）
  fetch('/api/get-selected-business-code')
    .then(response => response.json())
    .then(data => {
      const targetCode = data.selectedCode; // 假设接口返回的字段是selectedCode
      // 找到对应的option
      const targetOption = selectElement.querySelector(`option[value="${targetCode}"]`);
      // 如果找到就设置选中
      if (targetOption) {
        targetOption.selected = true;
      } else {
        console.warn(`未找到code为${targetCode}的选项`);
      }
    })
    .catch(err => console.error('获取选中数据失败:', err));
});

方案二：jQuery实现（如果项目用了jQuery） #

如果你的项目已经引入了jQuery，代码会更简洁：

$(document).ready(function() {
  const $select = $('#businessSelect');
  
  // 填充选项
  $select.empty();
  $.each(businessOptions, function(idx, option) {
    $select.append(`<option value="${option.code}">${option.value}</option>`);
  });

  // 调用接口设置选中
  $.get('/api/get-selected-business-code', function(data) {
    $select.val(data.selectedCode);
    // 如果接口返回的code不存在，jQuery会自动选中第一个选项或者保持空，也可以手动处理
    if (!$select.val()) {
      console.warn(`未找到对应选项`);
    }
  });
});

几个注意点 #

• 如果你下拉框的option的value不是用code而是用value字段，那要调整匹配逻辑，比如用option:contains(${targetValue})或者遍历选项匹配文本。
• 一定要确保在DOM加载完成后再执行代码，否则会找不到下拉框元素。
• 记得处理接口请求失败或者返回的code不存在的情况，避免出现异常。

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