根据一个下拉列表填充另一个下拉列表，并获取" value“而不是显示value的下拉列表

<label for="first-dropdown">第一个下拉列表：</label>
<select id="first-dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<label for="second-dropdown">第二个下拉列表：</label>
<select id="second-dropdown"></select>

// 获取第一个下拉列表和第二个下拉列表的元素
var firstDropdown = document.getElementById("first-dropdown");
var secondDropdown = document.getElementById("second-dropdown");

// 监听第一个下拉列表的变化
firstDropdown.addEventListener("change", function() {
  // 清空第二个下拉列表的选项
  secondDropdown.innerHTML = "";

  // 获取第一个下拉列表当前选中的值
  var selectedValue = firstDropdown.value;

  // 根据选中的值生成第二个下拉列表的选项
  if (selectedValue === "option1") {
    secondDropdown.innerHTML += '<option value="value1">值1</option>';
    secondDropdown.innerHTML += '<option value="value2">值2</option>';
    secondDropdown.innerHTML += '<option value="value3">值3</option>';
  } else if (selectedValue === "option2") {
    secondDropdown.innerHTML += '<option value="value4">值4</option>';
    secondDropdown.innerHTML += '<option value="value5">值5</option>';
    secondDropdown.innerHTML += '<option value="value6">值6</option>';
  } else if (selectedValue === "option3") {
    secondDropdown.innerHTML += '<option value="value7">值7</option>';
    secondDropdown.innerHTML += '<option value="value8">值8</option>';
    secondDropdown.innerHTML += '<option value="value9">值9</option>';
  }
});

var selectedValue = secondDropdown.value;
console.log(selectedValue);