JavaScript下拉选择仅加载首个购物车值问题求助

1. 赋值操作替代了比较操作：你写的if (i = 1)是赋值语句而非比较判断，每次执行都会把i设为1，这个表达式结果为真，因此只会执行第一个分支，导致productpr始终是首个商品的值。而且循环结束后i的实际值是8，但赋值操作直接覆盖了这个值。
2. 商品值更新逻辑未绑定下拉框事件：更新productpr的if-else代码块处于全局作用域，仅在页面加载时执行一次，没有和下拉框的onchange事件关联，切换下拉选项时完全不会触发商品值的更新。

修改后的JavaScript代码 #

var imageList = Array();
for (var i = 1; i <= 7; i++) {
  imageList[i] = new Image(500, 500);
  imageList[i].src = "https://sampleurl.com/images/" + i + ".jpg";
}

function switchImage() {
  var selectedValue = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
  // 更新展示图片
  if (selectedValue !== "0") {
    document.myImage.src = imageList[selectedValue].src;
  }
  // 更新购物车商品值
  var productPrInput = document.querySelector('input[name="productpr"]');
  switch(selectedValue) {
    case "1":
      productPrInput.value = "8 x 13 Enlightenment - Open Edition Reproduction:60.00";
      break;
    case "2":
      productPrInput.value = "12 x 20 Enlightenment - Limited Edition Reproduction:125.00";
      break;
    case "3":
      productPrInput.value = "18 x 30 Enlightenment - Limited Edition Reproduction:225.00";
      break;
    default:
      // 选择默认选项时清空商品值
      productPrInput.value = "";
      break;
  }
}

• 避免用switch作为元素name，这是JavaScript关键字，虽然浏览器兼容，但易引发混淆，建议改为sizeSwitch这类名称。
• 改用document.getElementById或document.querySelector获取元素，比document.myForm.switch更清晰且不易出错。
• 可以直接把商品完整标识存在下拉选项的value中，减少代码硬编码，比如：

<option value="8 x 13 Enlightenment - Open Edition Reproduction:60.00">8 x 13 paper - $60</option>

这样JS里只需直接将选中的value赋值给productpr，不用写多个判断分支。

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