如何用JavaScript实现HTML下拉选框联动JSON数据填充输入框

没问题，我帮你搞定这个需求！咱们一步步来，先把逻辑理清楚：当用户选中下拉框的选项时，根据选项的value值去匹配预先准备好的JSON数据，然后把对应的数据填充到输入框里。我给你完整的可运行代码示例，你直接套用就行：

1. 完善HTML结构 #

首先得补充需要填充的input输入框（这里我假设你要填充套餐描述、价格、有效期三个字段，你可以根据实际需求调整）：

<select name="bundle_typeCode" id="bundle_typeCode" class="form-control">
  <option value="153">200min Onnet Voice</option>
  <option value="101">1GB Data Bundle</option>
  <option value="162">5GB Night & Weekend Data Bundle</option>
  <option value="102">3GB Data Bundle</option>
</select>

<!-- 示例输入框，可按需修改数量和属性 -->
<input type="text" id="bundle_desc" placeholder="套餐描述">
<input type="text" id="bundle_price" placeholder="套餐价格">
<input type="text" id="bundle_validity" placeholder="有效期">

2. 准备对应JSON数据 #

把每个套餐的详细数据整理成JSON对象，用select的value值作为key，这样能快速定位到对应数据：

const bundleData = {
  "153": {
    desc: "200分钟网内通话套餐",
    price: "19.99元",
    validity: "30天"
  },
  "101": {
    desc: "1GB通用流量套餐",
    price: "29.99元",
    validity: "30天"
  },
  "162": {
    desc: "5GB夜间&周末专属流量套餐",
    price: "14.99元",
    validity: "30天"
  },
  "102": {
    desc: "3GB通用流量套餐",
    price: "49.99元",
    validity: "30天"
  }
};

3. 编写JavaScript事件逻辑 #

给select控件添加change事件监听，选中选项时自动填充数据，还可以加个页面加载时的默认填充逻辑：

// 获取页面元素
const bundleSelect = document.getElementById('bundle_typeCode');
const descInput = document.getElementById('bundle_desc');
const priceInput = document.getElementById('bundle_price');
const validityInput = document.getElementById('bundle_validity');

// 下拉框选中变化时触发的逻辑
bundleSelect.addEventListener('change', function() {
  const selectedValue = this.value;
  const selectedBundle = bundleData[selectedValue];
  
  // 如果找到对应数据就填充，否则清空输入框
  if (selectedBundle) {
    descInput.value = selectedBundle.desc;
    priceInput.value = selectedBundle.price;
    validityInput.value = selectedBundle.validity;
  } else {
    descInput.value = '';
    priceInput.value = '';
    validityInput.value = '';
  }
});

// 可选：页面加载完成时自动填充第一个选项的数据
window.addEventListener('load', function() {
  const defaultVal = bundleSelect.value;
  const defaultBundle = bundleData[defaultVal];
  if (defaultBundle) {
    descInput.value = defaultBundle.desc;
    priceInput.value = defaultBundle.price;
    validityInput.value = defaultBundle.validity;
  }
});

小提示 #

• 如果你只需要填充单个输入框，直接删掉多余的input和对应的JSON字段、赋值逻辑就行，非常灵活。
• JSON数据的结构完全可以根据你的业务需求调整，比如增加更多字段或者修改字段名称，只要和输入框的赋值逻辑对应上就ok。
• 这里用的是原生JavaScript，不需要依赖任何框架，兼容性拉满~

内容的提问来源于stack exchange，提问作者T.G.B