如何用switch、if else配合HTML select实现输入框自动显示医生诊费

看起来你已经搭建了国家-州-城市的基础数据结构，但联动逻辑可能没到位，同时还需要结合疾病选择来自动展示对应诊疗费用。我来一步步帮你实现完整功能：

先搭建完整的HTML表单结构，再通过JS实现三级联动的逻辑，确保用户能按顺序选择国家→州→城市：

<form id="medicalForm">
  <div>
    <label>国家:</label>
    <select id="countrySelect">
      <option value="">请选择国家</option>
    </select>
  </div>
  <div>
    <label>州/省:</label>
    <select id="stateSelect" disabled>
      <option value="">请先选择国家</option>
    </select>
  </div>
  <div>
    <label>城市:</label>
    <select id="citySelect" disabled>
      <option value="">请先选择州/省</option>
    </select>
  </div>
  <div>
    <label>疾病类型:</label>
    <select id="diseaseSelect" disabled>
      <option value="">请先选择城市</option>
      <option value="cold">感冒</option>
      <option value="fever">发烧</option>
      <option value="diabetes">糖尿病</option>
    </select>
  </div>
  <div>
    <label>诊疗费用:</label>
    <input type="text" id="feeInput" readonly placeholder="请选择完整信息">
  </div>
</form>

对应的JS联动逻辑：

// 你的国家-州-城市基础数据（修复了Dallas后的空格问题）
var countryStateInfo = { 
  "USA": { 
    "California": { 
      "Los Angeles" : ["ucl01", "ucl02"], 
      "San Diego" : ["ucs01","ucs02"] 
    }, 
    "Texas": { 
      "Dallas" : ["utd01", "utd02"], 
      "Austin" : ["uta01", "uta02"] 
    } 
  }, 
  "India": { 
    "Uttar Pradesh": { 
      "Kanpur": ["upk01", "upk02"],
      "Lucknow": ["upl01", "upl02"]
    },
    "Maharashtra": {
      "Mumbai": ["mmb01", "mmb02"],
      "Pune": ["mpn01", "mpn02"]
    }
  }
};

// 获取DOM元素
const countrySelect = document.getElementById('countrySelect');
const stateSelect = document.getElementById('stateSelect');
const citySelect = document.getElementById('citySelect');
const diseaseSelect = document.getElementById('diseaseSelect');
const feeInput = document.getElementById('feeInput');

// 初始化国家下拉选项
Object.keys(countryStateInfo).forEach(country => {
  const option = document.createElement('option');
  option.value = country;
  option.textContent = country;
  countrySelect.appendChild(option);
});

// 国家变化时更新州选项
countrySelect.addEventListener('change', function() {
  const selectedCountry = this.value;
  // 重置后续选项和费用
  stateSelect.innerHTML = '<option value="">请选择州/省</option>';
  citySelect.innerHTML = '<option value="">请先选择州/省</option>';
  diseaseSelect.innerHTML = '<option value="">请先选择城市</option>';
  feeInput.value = '';
  
  if (selectedCountry) {
    stateSelect.disabled = false;
    // 填充州选项
    Object.keys(countryStateInfo[selectedCountry]).forEach(state => {
      const option = document.createElement('option');
      option.value = state;
      option.textContent = state;
      stateSelect.appendChild(option);
    });
  } else {
    stateSelect.disabled = true;
    citySelect.disabled = true;
    diseaseSelect.disabled = true;
  }
});

// 州变化时更新城市选项
stateSelect.addEventListener('change', function() {
  const selectedCountry = countrySelect.value;
  const selectedState = this.value;
  // 重置后续选项和费用
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  diseaseSelect.innerHTML = '<option value="">请先选择城市</option>';
  feeInput.value = '';
  
  if (selectedState) {
    citySelect.disabled = false;
    // 填充城市选项
    Object.keys(countryStateInfo[selectedCountry][selectedState]).forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  } else {
    citySelect.disabled = true;
    diseaseSelect.disabled = true;
  }
});

// 城市变化时启用疾病选择
citySelect.addEventListener('change', function() {
  const selectedCity = this.value;
  feeInput.value = '';
  
  if (selectedCity) {
    diseaseSelect.disabled = false;
  } else {
    diseaseSelect.disabled = true;
  }
});

接下来我们通过三种方式实现“城市+疾病→费用”的映射逻辑，你可以根据需求选择：

方式一：嵌套if-else（适合简单场景） #

diseaseSelect.addEventListener('change', function() {
  const selectedCountry = countrySelect.value;
  const selectedState = stateSelect.value;
  const selectedCity = citySelect.value;
  const selectedDisease = this.value;
  
  if (!selectedCountry || !selectedState || !selectedCity || !selectedDisease) {
    feeInput.value = '';
    return;
  }
  
  let fee;
  // 按国家→州→城市→疾病的层级判断
  if (selectedCountry === 'USA') {
    if (selectedState === 'California') {
      if (selectedCity === 'Los Angeles') {
        if (selectedDisease === 'cold') fee = 80;
        else if (selectedDisease === 'fever') fee = 100;
        else if (selectedDisease === 'diabetes') fee = 150;
      } else if (selectedCity === 'San Diego') {
        if (selectedDisease === 'cold') fee = 75;
        else if (selectedDisease === 'fever') fee = 95;
        else if (selectedDisease === 'diabetes') fee = 140;
      }
    } else if (selectedState === 'Texas') {
      if (selectedCity === 'Dallas') {
        if (selectedDisease === 'cold') fee = 70;
        else if (selectedDisease === 'fever') fee = 90;
        else if (selectedDisease === 'diabetes') fee = 130;
      } else if (selectedCity === 'Austin') {
        if (selectedDisease === 'cold') fee = 72;
        else if (selectedDisease === 'fever') fee = 92;
        else if (selectedDisease === 'diabetes') fee = 135;
      }
    }
  } else if (selectedCountry === 'India') {
    if (selectedState === 'Uttar Pradesh') {
      if (selectedCity === 'Kanpur') {
        if (selectedDisease === 'cold') fee = 500;
        else if (selectedDisease === 'fever') fee = 600;
        else if (selectedDisease === 'diabetes') fee = 1200;
      } else if (selectedCity === 'Lucknow') {
        if (selectedDisease === 'cold') fee = 550;
        else if (selectedDisease === 'fever') fee = 650;
        else if (selectedDisease === 'diabetes') fee = 1300;
      }
    }
  }
  
  // 根据国家显示对应货币
  const currency = selectedCountry === 'USA' ? '$' : '₹';
  feeInput.value = fee ? `${currency}${fee}` : '暂无费用信息';
});

方式二：switch语句（结构更清晰） #

diseaseSelect.addEventListener('change', function() {
  const selectedCountry = countrySelect.value;
  const selectedState = stateSelect.value;
  const selectedCity = citySelect.value;
  const selectedDisease = this.value;
  
  if (!selectedCountry || !selectedState || !selectedCity || !selectedDisease) {
    feeInput.value = '';
    return;
  }
  
  let fee;
  // 组合城市唯一标识
  const locationKey = `${selectedCountry}-${selectedState}-${selectedCity}`;
  
  switch(locationKey) {
    case 'USA-California-Los Angeles':
      switch(selectedDisease) {
        case 'cold': fee = 80; break;
        case 'fever': fee = 100; break;
        case 'diabetes': fee = 150; break;
      }
      break;
    case 'USA-California-San Diego':
      switch(selectedDisease) {
        case 'cold': fee = 75; break;
        case 'fever': fee = 95; break;
        case 'diabetes': fee = 140; break;
      }
      break;
    case 'India-Uttar Pradesh-Kanpur':
      switch(selectedDisease) {
        case 'cold': fee = 500; break;
        case 'fever': fee = 600; break;
        case 'diabetes': fee = 1200; break;
      }
      break;
    // 其他城市的case可继续补充
    default:
      fee = null;
  }
  
  const currency = selectedCountry === 'USA' ? '$' : '₹';
  feeInput.value = fee ? `${currency}${fee}` : '暂无费用信息';
});

方式三：嵌套对象直接取值（最简洁高效） #

先定义费用数据结构，再直接通过键值访问：

// 定义各城市-疾病对应的费用
const consultationFees = {
  "USA": {
    "California": {
      "Los Angeles": {"cold":80, "fever":100, "diabetes":150},
      "San Diego": {"cold":75, "fever":95, "diabetes":140}
    },
    "Texas": {
      "Dallas": {"cold":70, "fever":90, "diabetes":130},
      "Austin": {"cold":72, "fever":92, "diabetes":135}
    }
  },
  "India": {
    "Uttar Pradesh": {
      "Kanpur": {"cold":500, "fever":600, "diabetes":1200},
      "Lucknow": {"cold":550, "fever":650, "diabetes":1300}
    }
  }
};

// 监听疾病选择事件
diseaseSelect.addEventListener('change', function() {
  const selectedCountry = countrySelect.value;
  const selectedState = stateSelect.value;
  const selectedCity = citySelect.value;
  const selectedDisease = this.value;
  
  if (!selectedCountry || !selectedState || !selectedCity || !selectedDisease) {
    feeInput.value = '';
    return;
  }
  
  try {
    const fee = consultationFees[selectedCountry][selectedState][selectedCity][selectedDisease];
    const currency = selectedCountry === 'USA' ? '$' : '₹';
    feeInput.value = `${currency}${fee}`;
  } catch (e) {
    feeInput.value = '暂无费用信息';
  }
});

• 如果你之前的联动菜单失效，大概率是没正确监听change事件，或者动态生成选项时DOM操作有误，上面的代码已经处理了选项重置和禁用状态，确保用户按顺序选择。
• 注意数据结构中的键名要和下拉选项的value完全一致（比如原数据中"Dallas "后面的空格会导致匹配失败，要提前清理）。
• 后续添加新的国家/城市/疾病时，只需要补充countryStateInfo和consultationFees的数据即可，无需修改核心逻辑。

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