键盘配件电商网站：多选中选项值以逗号分隔显示的实现问题求助

我看到你正在开发键盘配件销售网站，需要把两个下拉框的选中值合并到只读文本框里，用逗号分隔。你遇到的问题主要有两个：一是document.getElementById()只能接收单个ID参数，不能一次性获取多个元素；二是当前的change()和storeSub()函数只处理了第一个下拉框，没兼顾第二个。

下面是修改后的完整解决方案：

问题分析 #

• document.getElementById("product", "product2")写法错误，这个方法只能接受一个ID参数，要获取多个元素得分别调用两次。
• 现有逻辑只处理了product下拉框，完全没考虑product2的选中值，所以文本框里只会显示其中一个选项。
• storeSub()函数也只恢复了第一个下拉框的状态，第二个下拉框的选中状态没保存和恢复。

修改后的代码 #

HTML部分 #

<div class="input-name"> 
 <label for="products">Cases: </label> 
 <select name="product" id="product" class="larger" onchange="change()"> 
 <option selected>--Please select--</option> 
 <script>productlist1()</script> 
 </select> 
</div> 
<div class="input-name"> 
 <label for="products">Keycaps: </label> 
 <select name="product" id="product2" class="larger" onchange="change()"> 
 <option selected>--Please select--</option> 
 <script>productlist2()</script> 
 </select> 
</div> 
<div class="input-name"> 
 <label for="subject" id="subjectLabel">RE: Enquiry on</label> 
 <input type="text" name="subject" id="subject" class="subject_1" readonly> 
</div>

JavaScript部分 #

// 页面加载时恢复之前的选择
window.onload = function() {
  storeSub();
};

function storeSub() { 
  // 恢复第一个下拉框的选中状态
  if (sessionStorage.productIndex) {
    document.getElementById("product").selectedIndex = parseInt(sessionStorage.productIndex);
  }
  // 恢复第二个下拉框的选中状态
  if (sessionStorage.product2Index) {
    document.getElementById("product2").selectedIndex = parseInt(sessionStorage.product2Index);
  }
  // 更新文本框内容
  updateSubjectText();
} 

function productlist1() { 
  var select = document.getElementById("product"); 
  var options = ["Case1", "Case2", "Case3", "Case4"]; 
  for (var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
  } 
} 

function productlist2() { 
  var select = document.getElementById("product2"); 
  var options = ["Keycaps1", "Keycaps2", "Keycaps3", "Keycaps4"]; 
  for (var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
  } 
} 

function change() { 
  // 获取两个下拉框的值
  var productVal = document.getElementById("product").value;
  var product2Val = document.getElementById("product2").value;
  
  // 保存选中索引到sessionStorage
  sessionStorage.productIndex = document.getElementById("product").selectedIndex;
  sessionStorage.product2Index = document.getElementById("product2").selectedIndex;
  
  // 过滤掉默认选项，合并有效选项
  var selectedOptions = [];
  if (productVal !== "--Please select--") {
    selectedOptions.push(productVal);
  }
  if (product2Val !== "--Please select--") {
    selectedOptions.push(product2Val);
  }
  
  // 合并成逗号分隔的字符串
  var subjectText = selectedOptions.join(", ");
  
  // 更新文本框和sessionStorage
  sessionStorage.subject = subjectText;
  document.getElementById("subject").value = subjectText;
}

// 单独封装更新文本框的函数，方便复用
function updateSubjectText() {
  var productVal = document.getElementById("product").value;
  var product2Val = document.getElementById("product2").value;
  
  var selectedOptions = [];
  if (productVal !== "--Please select--") {
    selectedOptions.push(productVal);
  }
  if (product2Val !== "--Please select--") {
    selectedOptions.push(product2Val);
  }
  
  var subjectText = selectedOptions.join(", ");
  sessionStorage.subject = subjectText;
  document.getElementById("subject").value = subjectText;
}

关键修改点 #

1. 修复元素获取方式：分别调用document.getElementById("product")和document.getElementById("product2")获取两个下拉框元素。
2. 合并选项逻辑：在change()函数中收集两个下拉框的有效选中值（排除默认提示选项），用join(", ")合并成逗号分隔的字符串。
3. 完善状态保存与恢复：同时保存和恢复两个下拉框的选中索引，页面加载时自动恢复之前的选择并更新文本框。
4. 代码复用：把更新文本框的逻辑封装成updateSubjectText()函数，避免重复代码。

这样修改后，用户选择任意下拉框的选项，只读文本框都会实时显示合并后的结果，且刷新页面后能恢复之前的选择状态。

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