Jquery/Javascript onclick事件到html打开选择标记

我有一个位于选择标记顶部的跨距，当您单击选择标记时，菜单将打开以选择一个值，但当您单击位于选择标记顶部的跨距时，什么都不会发生。是否有一种jquery方式可以在单击时使用，从而打开“选择标记”菜单

<select id="support_support_type" name="support[support_type]">
  <option value="Contact">Contact</option>
  <option value="Feedback">Feedback</option>
  <option value="Help">Help</option>
</select>
<span class="drop down-arrow"></span>

联系
反馈
帮助

我想你想要的是标签提供的功能。因此，最好使用

，而不是绑定

<label for="support_support_type">Select</label>
<select id="support_support_type" name="support[support_type]">
   <option value="Contact">Contact</option>
   <option value="Feedback">Feedback</option>
   <option value="Help">Help</option>
</select>

选择
联系
反馈
帮助

---

现在，您已经了解了

的功能，即显示文本，但是当您单击它时，

会自动聚焦。

我想您想要的是标签提供的功能。因此，最好使用

，而不是绑定

<label for="support_support_type">Select</label>
<select id="support_support_type" name="support[support_type]">
   <option value="Contact">Contact</option>
   <option value="Feedback">Feedback</option>
   <option value="Help">Help</option>
</select>

选择
联系
反馈
帮助

现在，您已经掌握了

的功能，即显示文本，但当您单击它时，

将自动聚焦。

您可以使用

.attr（）

并将其设置为显示/隐藏可导航选项

工作代码片段：

var-toggle=true；
$（“span.向下箭头”）。在（“单击”，函数（）上{
如果（切换）{
$（“选择支持类型”）.attr（'size'，3）；//显示所有3个选项
切换=假；
}
否则{
$（“选择支持类型”）.attr（'size'，1）；//仅显示所选选项
切换=真；
}
});
$（'select#support _support _type'）。在（“change”，function（）上{
$（this.attr（'size'，1）；
切换=真；
});
span{
垂直对齐：顶部；
}
挑选{
溢出y：隐藏；
}

联系
反馈
帮助
span
您可以使用
.attr（）
并将其设置为显示/隐藏可用选项

工作代码片段：


var-toggle=true；
$（“span.向下箭头”）。在（“单击”，函数（）上{
如果（切换）{
$（“选择支持类型”）.attr（'size'，3）；//显示所有3个选项
切换=假；
}
否则{
$（“选择支持类型”）.attr（'size'，1）；//仅显示所选选项
切换=真；
}
});
$（'select#support _support _type'）。在（“change”，function（）上{
$（this.attr（'size'，1）；
切换=真；
});
span{
垂直对齐：顶部；
}
挑选{
溢出y：隐藏；
}

联系
反馈
帮助
span
您希望在单击span时触发
选择
标记的单击事件。因此，设置一个jquery函数，如下所示：

$('span').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});

当您单击span时，您希望触发
select
标记的单击事件。因此，设置一个jquery函数，如下所示：

$('span').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});

选择框上方的span
位置是否为ed
绝对值？如果是这样，那么使用CSS的指针事件就方便多了。鉴于此，我会将其用于生产。CSS规则通常也比javascript黑客更受欢迎

把这个添加到你的CSS文件中，你就可以开始了

.drop.down-arrow{
    pointer-events: none;
}

这样做基本上是允许光标通过它点击到它下面的
。希望我能帮上忙
 选择框上方的span
位置是否为ed
绝对值？如果是这样，那么使用CSS的指针事件就方便多了。鉴于此，我会将其用于生产。CSS规则通常也比javascript黑客更受欢迎

把这个添加到你的CSS文件中，你就可以开始了

.drop.down-arrow{
    pointer-events: none;
}

这样做基本上是允许光标通过它点击到它下面的
。希望我能帮上忙
 我可以用@trying\u-hal9000添加这个内联吗？是的，你可以这样做。顺便说一句，我已经用代码和一段有效的代码片段更新了我的答案。@trying_hal9000要实现您的目标，您需要在JS中进行适当的更改。我可以使用添加此内联吗？@trying_hal9000是的，您可以这样做。顺便说一句，我已经用代码和一个工作代码片段更新了我的答案。@为了实现您的目标，您需要在JS中进行适当的更改。对不起，我不明白，我尝试将跨度更改为标签，并使用相对位置将其放在选择标记的顶部，但单击时下拉列表不会出现抱歉，我不明白，我尝试将跨度更改为标签，并使用相对位置将其放置在选择标记的顶部，但单击删除解决方案时下拉列表不会出现，但我正在使用悬停等在选择器上渲染样式：/Elegent解决方案，但我正在使用悬停等在选择器上渲染样式：/