HTML下拉菜单如何使用户在进入下一个下拉菜单之前先选择第一个下拉菜单

hlswsv35 于 2023-04-27 发布在其他

关注(0)|答案(1)|浏览(204)

如果用户没有先选择第一个下拉菜单（电影），我如何才能使用户无法选择第二个下拉菜单（时间）？

<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="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">
    <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> ```

Html

来源：https://stackoverflow.com/questions/76078771/html-drop-down-how-to-make-the-user-select-first-drop-down-first-before-going-to

1条答案

按热度按时间

yftpprvb1#

use disabled attribute in select tag. <select name="Time" id="time" disabled>这可以防止用户点击它。
然后在用JavaScript启用它之前检查是否满足条件

<script>
            var firstDropDown = document.getElementById("movie")

            firstDropDown.addEventListener("click", () => {
                var seconddrop = document.getElementById("time")
                seconddrop.disabled = false
            })
</script>

此代码将在用户单击后启用第二个下拉列表。
在启用第二个下拉列表之前，您可能希望满足额外的条件。例如，如果下拉列表中的第一个选项是一个没有值的保持器，则在启用前检查select是否包含值。

赞(0）回复(0）举报 2023-04-27

我来回答

HTML下拉菜单如何使用户在进入下一个下拉菜单之前先选择第一个下拉菜单

1条答案

相关问题

热门标签

最新问答