如何在HTML5中禁用下拉列表?


下拉列表定义了用户选择的可用选项列表。我们在日常工作中访问许多网站,在这些网页上,我们会发现一个或多个导航中下拉列表中有多种选项来访问该特定网页。例如,大型网站上的下拉菜单可以通过让用户跳过一到两个级别来访问他们正在寻找的信息,从而帮助用户节省时间。本文中使用的示例将解释如何创建禁用此类下拉列表的HTML5代码。

可视化表示

语法

<select>……
<option> list1 </option>
<option> list2 </option>
<option> list3 </option>
</select>

select标签用于创建下拉列表,而option标签定义要选择的列表值。

示例

在这个例子中,我们将首先使用h1标签设置问题陈述的主标题,使用p标签设置关于下拉列表的一些信息。要禁用下拉列表,它将使用select标签中的关键字disabled,并在网页上显示结果。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
</head>
<body>
   <h1>Central Board of Secondary Education</h1>
   <p style="color: #000fff"><b>The example to display non-disable dropdown list</b></p>
   <p>The Courses offer for intermediate science student</p>
   <select>
      <option value="physics">Physics</option>
      <option value="chemistry">Chemistry</option>
      <option value="biology">Biology</option>
      <option value="math">Math</option>
      <option value="Social Science">Social Science</option>
   </select>
   <br><br><br><br><br><br>
   <p style="color: #000fff"><b>The example to display disable dropdown list</b></p>
   <h3>The Courses offer for intermediate commerce student</h3>
   <select disabled>
      <option value="physics">Business Mathematics</option>
      <option value="chemistry">Economics</option>
      <option value="biology">Accountancy</option>
      <option value="math">English</option>
      <option value="Social Science">Tally</option>
   </select>
</body>
</html>

使用下拉列表的优点

  • 它有助于避免滚动网页。

  • 非常容易访问内容。

  • 对于电子商务网页来说,这有助于过滤特定的产品部分。

结论

我们了解了通过禁用下拉列表的下拉列表示例。上面的输出显示了禁用和未禁用下拉列表之间的区别。当管理员想要保护特定网页时,禁用选项可能很有用,因为它会变得不活动且无响应。

更新于:2023年5月15日

2K+浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.