级联下拉菜单和正确设置详细值

要实现级联下拉菜单和正确设置详细值，可以使用JavaScript和HTML来编写代码。以下是一个示例代码：

HTML部分：

<select id="firstDropdown" onchange="populateSecondDropdown()">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="secondDropdown">
  <option value="">请选择</option>
</select>

<div id="detailsDiv"></div>

JavaScript部分：

var options = {
  "1": ["详细值1-1", "详细值1-2", "详细值1-3"],
  "2": ["详细值2-1", "详细值2-2", "详细值2-3"],
  "3": ["详细值3-1", "详细值3-2", "详细值3-3"]
};

function populateSecondDropdown() {
  var firstDropdown = document.getElementById("firstDropdown");
  var secondDropdown = document.getElementById("secondDropdown");
  var selectedOption = firstDropdown.value;
  
  // 清除第二个下拉菜单的选项
  secondDropdown.innerHTML = "<option value=''>请选择</option>";
  
  // 如果选择了有效的选项，则根据所选选项填充第二个下拉菜单的选项
  if (selectedOption != "") {
    var details = options[selectedOption];
    for (var i = 0; i < details.length; i++) {
      var option = document.createElement("option");
      option.value = details[i];
      option.text = details[i];
      secondDropdown.add(option);
    }
  }
  
  // 清除详细值
  document.getElementById("detailsDiv").innerHTML = "";
}

// 当第二个下拉菜单的选项发生变化时，设置详细值
document.getElementById("secondDropdown").onchange = function() {
  var selectedOption = this.value;
  document.getElementById("detailsDiv").innerHTML = "详细值：" + selectedOption;
};

这段代码首先创建了两个下拉菜单和一个用于显示详细值的div。然后，定义了一个options对象，其中包含了每个选项对应的详细值。populateSecondDropdown()函数用于根据第一个下拉菜单的选项动态生成第二个下拉菜单的选项。在第二个下拉菜单的onchange事件中，根据所选选项设置详细值。