如何用JavaScript/JQuery从对象数组中提取serviceProviderContact字段邮箱？

嘿，这事儿不难！你要做的就是把运营商列表填充到下拉框的同时，把对应的邮箱关联上，之后选中选项时就能轻松拿到邮箱了。下面给你两种常用的实现方式，原生JS和jQuery都有：

方式一：原生JavaScript实现 #

1. 填充下拉列表并关联邮箱 #

先把你的providers数组循环遍历，生成下拉选项，同时把邮箱存到选项的自定义data-email属性里（或者直接用数组查找，后面会说）：

// 你的原数组
const providers = [
  {providerId: 1, countryId: 1, providerName: "Vodacom", serviceProviderContact: "support@company.co.za"},
  {providerId: 2, countryId: 1, providerName: "MTN", serviceProviderContact: "john@company.co.za"},
  {providerId: 3, countryId: 1, providerName: "Cell C", serviceProviderContact: "mike@company.co.za"},
  {providerId: 4, countryId: 1, providerName: "Telkom Mobile", serviceProviderContact: "Aplh@company.co.za"}
];

// 获取页面上的下拉元素（假设id是providerSelect）
const providerSelect = document.getElementById('providerSelect');

// 循环生成选项
providers.forEach(provider => {
  const option = document.createElement('option');
  option.value = provider.providerName; // 用名称当值，和你填充下拉的需求匹配
  option.textContent = provider.providerName;
  // 把邮箱存到自定义属性里
  option.dataset.email = provider.serviceProviderContact;
  providerSelect.appendChild(option);
});

2. 选中选项时获取邮箱 #

给下拉框绑定change事件，选中时直接从选项的自定义属性里取邮箱：

providerSelect.addEventListener('change', function() {
  // 获取当前选中的选项
  const selectedOption = this.options[this.selectedIndex];
  // 取出邮箱
  const selectedEmail = selectedOption.dataset.email;
  
  // 这里就可以用这个邮箱做你需要的操作了，比如打印或者显示在页面
  console.log('当前选中的邮箱：', selectedEmail);
});

如果你不想在DOM里存额外数据，也可以直接从原数组查找：

providerSelect.addEventListener('change', function() {
  const selectedName = this.value;
  // 从数组里找到匹配的运营商对象
  const matchedProvider = providers.find(p => p.providerName === selectedName);
  
  if (matchedProvider) {
    const selectedEmail = matchedProvider.serviceProviderContact;
    console.log('当前选中的邮箱：', selectedEmail);
  }
});

方式二：jQuery实现 #

如果你习惯用jQuery，代码会更简洁：

1. 填充下拉列表 #

const providers = [
  {providerId: 1, countryId: 1, providerName: "Vodacom", serviceProviderContact: "support@company.co.za"},
  {providerId: 2, countryId: 1, providerName: "MTN", serviceProviderContact: "john@company.co.za"},
  {providerId: 3, countryId: 1, providerName: "Cell C", serviceProviderContact: "mike@company.co.za"},
  {providerId: 4, countryId: 1, providerName: "Telkom Mobile", serviceProviderContact: "Aplh@company.co.za"}
];

// 循环生成选项并添加到下拉框
$.each(providers, function(index, provider) {
  $('#providerSelect').append(`
    <option value="${provider.providerName}" data-email="${provider.serviceProviderContact}">
      ${provider.providerName}
    </option>
  `);
});

2. 选中时获取邮箱 #

$('#providerSelect').on('change', function() {
  // 从选中的选项里取出邮箱
  const selectedEmail = $(this).find(':selected').data('email');
  console.log('当前选中的邮箱：', selectedEmail);
});

两种方式都能完美满足你的需求，选你顺手的来就行～

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