求助：如何将JavaScript菜单选中值传入HTML表单隐藏输入字段

直接修改现有代码，添加值同步逻辑即可，具体步骤如下：

1. 主菜单切换时同步值到requestName隐藏字段 #

修改ShowHideDiv函数，在切换主菜单的同时，把选中值赋值给隐藏字段：

function ShowHideDiv() {
  var options = document.getElementById("options");
  // 把主菜单选中值同步到隐藏字段
  document.getElementById("requestName").value = options.value;
  
  // 原有的显示/隐藏逻辑保留
  var requestName = document.getElementById("requestName");
  requestName.style.display = options.value == "Licensing" ? "block" : "none";
  requestName1.style.display = options.value == "Reporting" ? "block" : "none";
  requestName2.style.display = options.value == "Specification / Compatibility" ? "block" : "none";
  requestName3.style.display = options.value == "Operation / How To" ? "block" : "none";
  requestName4.style.display = options.value == "Installation / Uninstallation" ? "block" : "none";
  requestName5.style.display = options.value == "Upgrade / Downgrade" ? "block" : "none";
  requestName6.style.display = options.value == "Configuration / Workflow" ? "block" : "none";
  requestName7.style.display = options.value == "Administration" ? "block" : "none";
  requestName8.style.display = options.value == "Ordering / Replacing" ? "block" : "none";
  requestName9.style.display = options.value == "Documentation" ? "block" : "none";
  requestName10.style.display = options.value == "Security / Vulnerabilities" ? "block" : "none";
  requestName11.style.display = options.value == "Training" ? "block" : "none";
  requestName12.style.display = options.value == "Testing" ? "block" : "none";
}

2. 二级菜单选中时同步值到requestTypes隐藏字段 #

新增一个处理二级菜单选中事件的函数，同时修改changecat函数绑定该事件：

// 二级菜单选中时更新隐藏字段
function updateRequestTypes() {
  var category = document.getElementById("category");
  document.getElementById("requestTypes").value = category.value;
}

function changecat(value) {
  if (value.length == 0) {
    document.getElementById("category").innerHTML = "<option></option>";
  } else {
    var catOptions = "";
    for (categoryId in requestTypes[value]) {
      catOptions += "<option value='" + requestTypes[value][categoryId] + "'>" + requestTypes[value][categoryId] + "</option>";
    }
    var categorySelect = document.getElementById("category");
    categorySelect.innerHTML = catOptions;
    // 绑定change事件，确保选中时同步值
    categorySelect.onchange = updateRequestTypes;
    // 初始化二级菜单后立即同步一次值
    updateRequestTypes();
  }
}

3. 页面加载时同步初始值（可选） #

如果页面加载时菜单已有默认选中项，添加页面初始化逻辑确保值同步：

window.onload = function() {
  // 同步主菜单初始值到隐藏字段
  ShowHideDiv();
  // 如果主菜单有默认值，触发二级菜单生成并同步值
  var options = document.getElementById("options");
  if (options.value) {
    changecat(options.value);
  }
};

重要提示 #

原代码存在重复ID问题：隐藏字段的ID是requestName，而你用来显示/隐藏的div也用了requestName作为ID，这会导致DOM元素冲突，JS获取元素时可能出错。建议修改显示div的ID，比如改成requestNameDiv，同时更新ShowHideDiv函数里的对应代码：

<!-- 修改显示div的ID -->
<div id="requestNameDiv">...</div>
<!-- 隐藏字段保留原ID -->
<input type="hidden" name="requestName" id="requestName" value="">

// 更新ShowHideDiv里的获取代码
var requestNameDiv = document.getElementById("requestNameDiv");
requestNameDiv.style.display = options.value == "Licensing" ? "block" : "none";

修改完成后，用户选择主菜单和二级菜单时，选中值会自动同步到对应的隐藏输入字段，表单提交时就能携带这些值了。

内容的提问来源于stack exchange，提问作者Da Blue Ragu