如何实现需先选择movie下拉菜单，才能操作time下拉菜单的交互

要实现用户必须先选择电影（id="movie"的下拉框）才能选择时间（id="time"的下拉框），可以通过默认禁用时间下拉框，并监听电影下拉框的选择事件动态启用它，具体步骤如下：

1. 修改基础HTML结构 #

先给时间下拉框添加disabled属性，让它默认处于不可选状态；同时可选给电影下拉框添加默认提示选项，优化用户引导：

<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php">
  <label for="Movie">Choose a movie:</label>
  <select name="Movie" id="movie">
    <option value="">-- 请选择电影 --</option>
    <option value="hulk">Hulk</option>
    <option value="creed">Creed</option>
    <option value="aviator">Aviator</option>
  </select>

<br><br>

<label for="Time">Choose a time:</label>
  <select name="Time" id="time" disabled>
    <option value="12:15">12:15pm</option>
    <option value="8:00">8:00pm</option>
    <option value="9:00">9:00pm</option>
  </select>


  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>

2. 添加JavaScript交互逻辑 #

在</body>标签前插入JS代码，监听电影下拉框的选择变化，控制时间下拉框的启用状态：

<script>
const movieSelect = document.getElementById('movie');
const timeSelect = document.getElementById('time');

movieSelect.addEventListener('change', function() {
  // 当电影选中有效选项时启用时间框，否则保持禁用
  timeSelect.disabled = this.value === '';
});
</script>

逻辑说明 #

• 初始状态下，时间下拉框因disabled属性无法点击选择。
• 用户选择任意有效电影选项后，时间下拉框自动解除禁用，允许操作。
• 若用户重新选择默认提示选项，时间下拉框会再次被禁用。

内容的提问来源于stack exchange，提问作者Barney Collins