当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript选项菜单切换与内容显示实现

JavaScript选项菜单切换与内容显示实现

2025-10-09 20:09:38 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript实现选项菜单切换与内容显示》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

使用 JavaScript 实现选项菜单的切换与内容展示

本文将介绍如何使用 JavaScript 实现选项菜单的动态切换和内容展示。核心思路是根据用户在主选项菜单中的选择，动态更新二级选项菜单的内容，并确保每次只显示当前选择的内容。通过本文的学习，你将掌握如何利用 JavaScript 操作 DOM 元素，实现交互性更强的表单功能。

动态更新选项菜单内容

核心在于监听主选项菜单（abcid）的 change 事件。当用户选择不同的选项时，触发事件处理函数，该函数会根据用户的选择动态更新二级选项菜单的内容。

HTML 结构

首先，定义 HTML 结构。包含一个主选项菜单（abcid）和一个初始隐藏的二级选项菜单。

<table>
  <tr>
    <td>
      <label>ABC:</label>
      &lt;select id=&quot;abcid&quot;&gt;
        <option value="" selected disabled>Select-</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      &lt;/select&gt;
    </td>
  </tr>
  <tr class="noDisplay">
    <td>
      <label></label>
      &lt;select&gt;
        <option value="" selected disabled>Select-</option>
      &lt;/select&gt;
    </td>
  </tr>
</table>

注意：

id="abcid" 是主选项菜单的 ID，JavaScript 将通过它来监听 change 事件。
初始隐藏二级选项菜单，使用 CSS 类 noDisplay 实现。

CSS 样式

为了初始隐藏二级选项菜单，需要添加以下 CSS 样式：

.noDisplay { display: none; }

JavaScript 代码

接下来是 JavaScript 代码，它负责监听 change 事件并动态更新二级选项菜单的内容。

const
  selectABC = document.querySelector('#abcid')
, trSelect2 = document.querySelector('tr.noDisplay')
, label_2   = trSelect2.querySelector('label')
, select_2  = trSelect2.querySelector('select')
, selCases =
  { A: { label: 'Aaa', sels:[ {k: '1', v:'Alex' }, {k: '2', v:'Jack'      }                       ] }
  , B: { label: 'Bbb', sels:[ {k: 'w', v:'US'   }, {k: 'x', v:'Australia' }, {k: 'y', v:'India' } ] }
  , C: { label: 'Ccc', sels:[ {k: '$', v:'Blue' }, {k: '£', v:'Green'     }, {k: '§', v:'Red'   } ] }
  };

selectABC.onchange = e =>
  {
  select_2.length        = 1
  select_2.selectedIndex = 0
  label_2.textContent    = selCases[selectABC.value].label
  selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) )
  trSelect2.classList.remove('noDisplay')
  }

代码解释：

获取 DOM 元素： 使用 document.querySelector 获取主选项菜单（selectABC）、二级选项菜单的元素（trSelect2）、二级选项菜单的标签（label_2）和二级选项菜单本身（select_2）。
定义数据结构： selCases 对象存储了不同选项（A、B、C）对应的标签文本和二级选项数据。每个选项对应一个对象，该对象包含一个 label 属性用于设置二级选项的标签，以及一个 sels 属性，它是一个数组，包含了二级选项的键值对。
监听 change 事件： selectABC.onchange = e => { ... } 监听主选项菜单的 change 事件。
更新二级选项菜单：
- select_2.length = 1; 清空二级选项菜单，只保留默认的 "Select-" 选项。
- select_2.selectedIndex = 0; 将二级选项菜单的选中项设置为默认项。
- label_2.textContent = selCases[selectABC.value].label; 根据主选项菜单的选择，设置二级选项菜单的标签文本。
- selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) ) 遍历 selCases 中对应选项的 sels 数组，动态创建
- trSelect2.classList.remove('noDisplay'); 移除二级选项菜单的 noDisplay 类，使其显示出来。

注意事项

确保 HTML 结构正确，ID 和类名与 JavaScript 代码中的选择器匹配。
selCases 对象中的数据结构要与实际需求相符，可以根据需要进行扩展。
如果需要在 JSP 中使用，需要将 JavaScript 代码嵌入到 JSP 页面中，并确保能够正确获取表单参数。

总结

通过以上步骤，你可以实现一个动态切换选项菜单并展示对应内容的表单。这种方法可以应用于各种需要根据用户选择动态更新表单内容的场景，例如，根据选择的商品类型显示不同的属性选项，或者根据选择的地区显示不同的城市列表。通过合理地组织 HTML 结构、CSS 样式和 JavaScript 代码，可以创建出用户体验良好的交互式表单。

以上就是《JavaScript选项菜单切换与内容显示实现》的详细内容，更多关于的资料请关注golang学习网公众号！