如何实现js面向对象封装级联下拉菜单列表的详细步骤？

本文共计3045个文字，预计阅读时间需要13分钟。

本实例开发的级联下拉菜单是基于已有JSON数据创建的DOM元素。点击文本框后，显示一级菜单。若菜单中包含子菜单，菜单右侧会有箭头。点击菜单后，会再显示下一级菜单。

本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后，显示一级菜单。如果菜单中包含子菜单，菜单右侧会有指示箭头。点击菜单之后，会再显示下一级菜单，以此类推。当菜单下无子菜单时，选择菜单后会在文本框中显示。

打开后的级联菜单效果如图所示：

使用实例中封装好的插件，只需要有一个input元素，即可通过插件自动生成级联下拉菜单，html代码如下所示：

<div style="margin-top:100px;text-align:center;"> <input type="text" id="input"> </div>

接下来看下具体封装的js代码怎么实现。

1. 声明级联菜单的构造函数

构造函数需要传入一个文本框元素和菜单关联数据两个参数。