如何在 HTML 中使用 JavaScript 和 jQuery 实现下拉选择框的单击切换显示？

使用 javascript 和 jquery 实现 html 下拉选择框的单击切换显示

在 HTML 中创建下拉选择框时，我们可以使用 select 标签。不过，如果需要实现单击选项后切换显示的内容，而没有使用 option 标签，则需要通过 JavaScript 和 jQuery 来实现。

以下是实现示例：

<div id="container">
  <button id="espanol">Español</button>
  <button id="english">English</button>
  <p id="text">...</p>
</div>

$(function() {
  // 为按钮添加点击事件
  $('#espanol, #english').on('click', function() {
    var text = $(this).text();
    $('#text').text($(this).text());
    $(this).text($('#text').text());
  });
});

在这个示例中：

• 我们首先选择了一个带有 id 为 container 的父容器。
• 在父容器中，我们创建了两个按钮（espanol 和 english）和一个段落（text）。
• 当单击其中一个按钮时，jQuery 将切换按钮上的文本和段落上的文本。

示例演示

访问 [这个链接](https://jsrun.net/4mzKp/edit) 查看示例演示。

以上就是如何在 HTML 中使用 JavaScript 和 jQuery 实现下拉选择框的单击切换显示？的详细内容，更多请关注其它相关文章！