javascript - 如何让一个保管箱显示另一个保管箱中的选项

Question

我在想是否可以让一个选择下拉框决定另一个选择下拉框中的选项。

例如，我想要一个复选框，如果选中该复选框，则会出现一个保管箱。当选择该保管箱中的选项时，会出现一个新的保管箱。

然后，如果我在第一个保管箱中选择了日期，那么我就可以在新保管箱中的一周中的所有日子之间进行选择。然后，如果我在第一个保管箱中选择周，那么我就可以在新保管箱中的所有周数之间进行选择。等等..

我尝试用谷歌搜索它，但没有成功。第一部分带有复选框并显示第一个保管箱很容易，但最后一部分对我来说就不那么容易了。

抱歉，如果我的英语不好并且我的问题有点难以理解。

编辑:

<script>
function showSelect() {
  var checkBox = document.getElementById("checked");
  var select = document.getElementById("select");

  if (checkBox.checked == true){
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}
</script>
Rot: <input type="checkbox" id="checked" onclick="showSelect()">

<select id="select" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Days</option>
  <option value="2">Week</option>
</select>

Answer 1

您可以通过监听第一个选择下拉列表上的 change 事件来做到这一点。获得选定的值后，您可以将其与另一个 if 语句一起使用来显示下一个选择列表。试试这个:

function showSelect() {
  var checkBox = document.getElementById("checked");
  var select = document.getElementById("select");

  if (checkBox.checked == true){
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}

var daysWeeks = document.getElementById('select'),
    days      = document.getElementById('select-days'),
    weeks     = document.getElementById('select-weeks');

daysWeeks.addEventListener('change', function() {
   var newSelect = daysWeeks.options[daysWeeks.selectedIndex].value;

    days.style.display = 'none';
    weeks.style.display = 'none';
  
   if (newSelect === '1') {
     days.style.display = 'block';
   } else if (newSelect === '2') {
     weeks.style.display = 'block';
   }
});

Rot: <input type="checkbox" id="checked" onclick="showSelect()">

<select id="select" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Days</option>
  <option value="2">Week</option>
</select>

<select id="select-days" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Day1</option>
  <option value="2">Day2</option>
</select>

<select id="select-weeks" style="display:none">
  <option disabled="disabled" selected="">-- choose --</option>
  <option value="1">Week1</option>
  <option value="2">Week2</option>
</select>