如何用HTML和JS为产品下拉选项设置多值并分区域填充

适配课程练习的纯HTML+JavaScript实现，无额外依赖，逻辑简单易落地。

核心逻辑 #

将每个产品对应的多组关联值（规格、编码、单价等）与下拉选项绑定，选中对应产品时读取关联值，直接赋值给后方的只读表单区域即可。

方案1：用JS对象映射产品数据（最易上手） #

无需修改原有HTML的下拉结构，仅调整JS逻辑即可实现。

1. 在JS中定义产品映射对象，以下拉选项的value作为键，每个键对应存储该产品的所有关联值：

   // 产品关联值映射表，可根据实际需求修改存储内容
   const productMap = {
     SM01: {
       spec: "瓶装/100g",
       price: 29.9
     },
     BF02: {
       spec: "瓶装/100g",
       price: 32.5
     },
     SR03: {
       spec: "瓶装/100g",
       price: 35.0
     },
     GC04: {
       spec: "瓶装/100g",
       price: 31.2
     },
     PN05: {
       spec: "瓶装/100g",
       price: 33.8
     }
   };
   

2. 修改原有myFunction的赋值逻辑，注意textarea作为表单输入元素，内容读写需要使用value属性，不要沿用原代码的innerHTML写法，避免出现渲染异常：

   function myFunction() {
     const selectedCode = document.getElementById("Product").value;
     // 选中默认提示项时清空所有填充内容
     if (selectedCode === "Choose Product...") {
       document.getElementById("Unit").value = "";
       document.getElementById("Code").value = "";
       document.getElementById("Price").value = "";
       return;
     }
     // 从映射表中取出当前产品的关联值
     const productInfo = productMap[selectedCode];
     // 分别填充到对应的只读文本框
     document.getElementById("Unit").value = productInfo.spec;
     document.getElementById("Code").value = selectedCode;
     document.getElementById("Price").value = `¥${productInfo.price.toFixed(2)}`;
   }
   

方案2：用HTML自定义属性绑定关联值（结构更直观） #

如果不想在JS中单独维护映射对象，也可以把关联值直接存在下拉选项的自定义属性上，HTML和JS逻辑同步修改即可。

1. 修改HTML的select标签，给每个产品选项加上对应自定义属性：

   <select name="Product" onchange="myFunction()" id="Product">
     <option selected>Choose Product...</option>
     <option value="SM01" data-spec="瓶装/100g" data-price="29.9">Sugar & Moss</option>
     <option value="BF02" data-spec="瓶装/100g" data-price="32.5">Black Fig</option>
     <option value="SR03" data-spec="瓶装/100g" data-price="35.0">Sandalwood Rose</option>
     <option value="GC04" data-spec="瓶装/100g" data-price="31.2">Golden Coast</option>
     <option value="PN05" data-spec="瓶装/100g" data-price="33.8">Piñion</option>
   </select>
   

2. 对应的JS逻辑直接从选中的option节点上读取自定义属性即可：

   function myFunction() {
     const selectEl = document.getElementById("Product");
     // 选中默认提示项时清空内容
     if (selectEl.selectedIndex === 0) {
       document.getElementById("Unit").value = "";
       document.getElementById("Code").value = "";
       document.getElementById("Price").value = "";
       return;
     }
     // 获取当前选中的option元素
     const selectedOption = selectEl.options[selectEl.selectedIndex];
     // 读取自定义属性的值并填充
     document.getElementById("Unit").value = selectedOption.dataset.spec;
     document.getElementById("Code").value = selectedOption.value;
     document.getElementById("Price").value = `¥${selectedOption.dataset.price}`;
   }
   

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