Jquery / Javascript onclick event to html open select tag

Jquery / Javascript onclick event to html open select tag

本文关键字：html open select tag to event Javascript onclick Jquery      更新时间：2023-09-26

我有一个范围，我位于选择标签的顶部，当您单击选择标签时，菜单会打开以选择一个值，但是当您单击位于选择标签顶部的跨度时，没有任何反应。有没有一种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>

跨度是否position ed absolute在选择框上？如果是这样，那么使用CSS的指针事件会方便得多。鉴于它与几乎所有浏览器兼容，我会将其用于生产。CSS规则通常也比JavaScript黑客更受欢迎。

将其添加到您的CSS文件中，您就可以开始了。

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

的作用基本上是允许光标单击它到它下面的<select>。希望我有帮助！

您希望

在单击范围时触发select标签的单击事件。因此，设置一个像这样的jquery函数：

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

工作演示

您可以使用

.attr()并将其设置为显示/隐藏可用的选项。

工作代码片段：

var toggle = true;
$("span.down-arrow").on("click", function(){
  if(toggle){
    $("select#support_support_type").attr('size', 3); // show all 3 options
    toggle = false;
  }
  else{
    $("select#support_support_type").attr('size', 1); // show only the selected option
    toggle = true;
  }
});
$('select#support_support_type').on("change", function() {
  $(this).attr('size', 1); 
  toggle = true;
});
span{
  vertical-align: top;
}
select{
  overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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</span>

阅读：

  • .attr() | jQuery

我想你想要的是标签提供的功能。因此，您最好使用 <label> ，而不是绑定。

<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>

现在，您已经有了<span>的功能，即显示文本，但是当您单击它时，<select>会自动获得焦点。

相关文章：