如何根据选定的单选按钮更新选择选项？

Question

我有一个班级作业，我们必须创建一个网站，其中包含 4 个不同的单选按钮，但对于每个按钮，都有一个下拉列表，每个按钮都有不同的选项。我正在努力弄清楚如何将其放入 JavaScript 中。

有 4 天可供您选择：第 1 天、第 2 天、第 3 天和第 4 天。第 1 天和第 3 天的时间为下午 2 点、下午 5 点和晚上 8 点；而第 2 天和第 4 天的时间是下午 1 点和下午 4 点。

这是我目前的代码：

function onLoad() {
  //method for button times
  var select = document.getElementById("day1");
  select.options[select.options.length] = new Option("2:00 PM", "2pm");

  var select = document.getElementById("day1");
  select.options[select.options.length] = new Option("5:00 PM", "5pm");

  var select = document.getElementById("day1");
  select.options[select.options.length] = new Option("8:00 PM", "8pm");

  var select = document.getElementById("day2");
  select.options[select.options.length] = new Option("1:00 PM", "1pm");

  var select = document.getElementById("day2");
  select.options[select.options.length] = new Option("4:00 PM", "4pm");
}

这是 index.html 文件中的相关部分：

<h2>Choose Your Date</h2>
<input type="radio" value="sat_feb8" name="date1" id="day1" onclick="onLoad();" checked="checked">
<label for="size1">Saturday, February 8</label>
<br>

<input type="radio" value="sun_feb9" name="date1" id="day2" onclick="onLoad()">
<label for="size2">Sunday, February 9</label>
<br>

<input type="radio" value="sat_feb15" name="date1" id="day1" onclick="onLoad()">
<label for="size3">Saturday, February 15</label>
<br>

<input type="radio" value="sun_feb15" name="date1" id="day1" onclick="onLoad()">
<label for="size4">Sunday, February 16</label>
<br>

我为索引页面中的每个按钮调用了onLoad 函数。 谢谢！

Answer 1

这里是示例代码。您可以有两组单选按钮并根据日期选择显示/隐藏。希望这会有所帮助。

function onLoad() {
  //method for button times
  var group1 = document.getElementById("group1");
  group1.classList.remove('hide');
  group1.classList.add('show');
  
  var group2 = document.getElementById("group2");
  group2.classList.remove('show');
  group2.classList.add('hide');
}


function onLoad2() {
  //method for button times
  var group2 = document.getElementById("group2");
  group2.classList.remove('hide');
  group2.classList.add('show');
  
  var group1 = document.getElementById("group1");
  group1.classList.remove('show');
  group1.classList.add('hide');
}

.hide {
  display: none;
}

.show {
  display: block;
}

<h2>Choose Your Date</h2>
<input type="radio" value="sat_feb8" name="date1" id="day1" onclick="onLoad();">
<label for="size1">Saturday, February 8</label>
<br>

<input type="radio" value="sun_feb9" name="date1" id="day2" onclick="onLoad2()">
<label for="size2">Sunday, February 9</label>
<br>

<input type="radio" value="sat_feb15" name="date1" id="day1" onclick="onLoad()">
<label for="size3">Saturday, February 15</label>
<br>

<input type="radio" value="sun_feb15" name="date1" id="day1" onclick="onLoad2()">
<label for="size4">Sunday, February 16</label>
<br>

<h2>Choose Time</h2>
<div id="group1" class="hide">
<select>
<option>2 PM</option>
<option>5 PM</option>
<option>8 PM</option>
</select>
</div>

<div id="group2" class="hide">
<select>
<option>1 PM</option>
<option>4 PM</option>
</select>
</div>

Answer 2

不要使用js 创建dropdown，而是使用select 直接将它们添加到html。您可以为每个radio 按钮创建容器并添加change 事件。触发更改事件时，您可以通过获取单击的单选按钮的父级，然后获取其中的 select 元素来显示它的下拉列表。然后把它的显示样式改为block。

document.querySelectorAll('input')
  .forEach(input => {
    input.addEventListener('change', function() {
      document.querySelectorAll('select').forEach(select => select.style.display = "none");
      const selectEle = this.parentElement.querySelector('select');
      selectEle.style.display = "block";
    });
  });
  
  document.querySelector('input:checked').parentElement.querySelector('select').style.display = "block";

select {
    display: none;
}

<h2>Choose Your Date</h2>
<div>
  <input type="radio" value="sat_feb8" name="date1" id="day1" checked="checked">
  <label for="size1">Saturday, February 8</label>

  <select>
    <option value="2pm">2:00 PM</option>
    <option value="5pm">5:00 PM</option>
    <option value="8pm">8:00 PM</option>
  </select>
</div>
<div>
  <input type="radio" value="sun_feb9" name="date1" id="day2">
  <label for="size2">Sunday, February 9</label>
  <select>
    <option value="1pm">1:00 PM</option>
    <option value="4pm">4:00 PM</option>
  </select>
</div>
<div>
  <input type="radio" value="sat_feb15" name="date1" id="day3">
  <label for="size3">Saturday, February 15</label>

  <select>
    <option value="2pm">2:00 PM</option>
    <option value="5pm">5:00 PM</option>
    <option value="8pm">8:00 PM</option>
  </select>
</div>
<div>
  <input type="radio" value="sun_feb15" name="date1" id="day4">
  <label for="size4">Sunday, February 16</label>
  <select>
    <option value="1pm">1:00 PM</option>
    <option value="4pm">4:00 PM</option>
  </select>
</div>