html下拉框的选择js代码添加控件,原生js实现下拉框选择组件

本文实例为大家分享了js实现下拉框选择组件的具体代码，供大家参考，具体内容如下

功能需求：

1、点击div后，div显示聚焦状态，同时显示下拉框内容；

2、选择儿童人数后，如果儿童人数大于0，在下方出现对应的儿童年龄选择框数量；

3、成人人数的选择范围是1-7，儿童人数的选择范围是0-4，儿童年龄的选择范围是<1、1-17；

4、点击确认按钮后，将选择好的成人人数和儿童人数显示在最上方的div内；

5、可以控制选择框是否可点击；

6、当显示一个ul列表时，点击另一个ul列表，将上一个ul列表隐藏；

7、点击隐藏框内除绑定事件元素外，将正在显示的ul列表隐藏；

8、点击页面中任意空白位置，将显示的下拉框内容整体隐藏；

下拉框不可操作时的显示状态：

下拉框可操作时：

选择儿童人数后，下方自动出现对应数量的儿童年龄选择框：

点击确认按钮后，将结果显示在是上方的div内：

刚开始的想法是对select、ul下拉列表、btn按钮分别进行事件监听，此外还要有当点击下拉框内其它位置时，ul下拉列表隐藏、当点击body时整个下拉框内容隐藏。监听事件过多，而且事件冒泡也会影响事件的执行，导致某些事件会出现执行多次的情况。

儿童年龄的选择框是根据儿童的人数来生成的，有几个儿童，就有几个年龄选择框。这种情况下，年龄的选择框肯定是动态创建的，无法针对年龄的select进行事件监听，只能采用事件委托的形式，所以最后把对select、ul下拉列表、btn按钮的点击事件，还有当点击container内其它位置时，ul下拉列表隐藏。全部委托给了dropDownContainer元素。

下面附上代码

html结构代码：

select

import Main from './js/Main.js';

//参数为false时，选择框不可点击；为true时，选择框可使用

let main=new Main(true);

main.appendTo("body");

Main.js文件：

import Utils from './Utils.js';

export default class Main{

static styles=false;

listPrep;

constructor(state){

//state控制下拉框是否可点击

this.state=state;

this.elem=this.createE();

}

createE(){

if(this.elem) return this.elem;

let div=Utils.createE("div");

div.className="guestsNum";

div.innerHTML=`人数未定

每间

2 成人

• ${this.setDropDownList("adult")}

0 儿童

• 0${this.setDropDownList("children")}

${this.state?'':'请优先选择日期，以便查询实时价格。'}

${this.state?'确认':'确认'}

</