HTML 下拉列表：如何用 JavaScript 和 jQuery 实现点击选项切换显示内容？

HTML 下拉选择列表：点击切换显示

在 HTML 中，您可以使用下拉选择列表创建交互式菜单。但是，如果您不使用<option>标签，而使用 JavaScript (JS) 和 jQuery，如何实现单击选项时切换显示内容呢？

解决方案

可以使用 JS 和 jQuery 来监听下拉选择列表中选项的单击事件。当检测到单击事件时，您可以编写代码来获取用户单击的选项的文本并更新相应元素的文本。

以下是实现此功能的一个示例：

<select id="mySelect">
  <option value="english">English</option>
  <option value="spanish">Español</option>
</select>

<p id="selectedLanguage">English</p>

$(function() {
  $('#mySelect').change(function() {
    $('#selectedLanguage').text($(this).val());
  });
});

在这个示例中，#mySelect 是下拉选择列表的 ID，#selectedLanguage 是要更新的文本元素的 ID。当用户单击#mySelect 中的选项时，它会触发change事件，该事件由 jQuery 处理。

然后，$(this).val()获取单击的选项的文本，并用它更新#selectedLanguage元素的文本。

延伸

您可以进一步自定义此代码，例如：

• 更改单击时更新的元素的类名
• 在更改时触发其他事件
• 仅在特定条件下更改显示（例如，仅在选项被选中时）