Javascript 防止单击我的下拉列表的Div标记

我需要创建一个下拉列表，其中在我的select标记上有一个div标记。div具有与按钮相同的功能：如果我单击它，它允许展开下拉列表。我的问题是div必须位于select之上，没有检测到单击。我该怎么做（使用CSS/JS）？我想让div保持在相同的位置，显示相同的内容，但是单击div会导致单击select 下面是HTML和CSS代码

.parent{
宽度：200px；
}
.下拉列表>div{
背景：灰色；
颜色：白色；
浮动：对；
位置：绝对位置；
右：0；
排名：0；
底部：0；
填充：0 5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.下拉菜单>选择{
宽度：100%；
高度：2em；
右：0；
排名：0；
底部：0；
}
.下拉列表{
位置：相对位置；
}

值1
价值2
价值3
v

只需添加到相关div即可。它将允许单击事件“通过”div，就好像它根本不存在一样。然后单击事件将由其右下方的select处理

.parent{
宽度：200px；
}
.下拉列表>div{
背景：灰色；
颜色：白色；
浮动：对；
位置：绝对位置；
右：0；
排名：0；
底部：0；
填充：0 5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*加上这个*/
指针事件：无；
}
.下拉菜单>选择{
宽度：100%；
高度：2em；
右：0；
排名：0；
底部：0；
}
.下拉列表{
位置：相对位置；
}

值1
价值2
价值3
v

只需添加到相关div即可。它将允许单击事件“通过”div，就好像它根本不存在一样。然后单击事件将由其右下方的select处理

.parent{
宽度：200px；
}
.下拉列表>div{
背景：灰色；
颜色：白色；
浮动：对；
位置：绝对位置；
右：0；
排名：0；
底部：0；
填充：0 5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*加上这个*/
指针事件：无；
}
.下拉菜单>选择{
宽度：100%；
高度：2em；
右：0；
排名：0；
底部：0；
}
.下拉列表{
位置：相对位置；
}

值1
价值2
价值3
v

我认为覆盖输入元素不是一个好方法。如果在输入不起作用时将disabled属性应用于输入，则会更干净、更安全：

<select disabled>

我认为覆盖输入元素不是一个好方法。如果在输入不起作用时将disabled属性应用于输入，则会更干净、更安全：

<select disabled>

请创建一个工作片段来演示您的问题。您正在谈论的

div

有三个。。。你是说里面有

span

的那个吗？很抱歉没有指定。是的，我说的是里面有一个跨度的那个！请创建一个工作片段来演示您的问题。您正在谈论的是哪个

div

，有三个。。。你是说里面有

span

的那个吗？很抱歉没有指定。是的，我说的是里面有一个跨度的那个！