Question

我有一个我已经定位在选择标记之上的范围，当您单击选择标记时，菜单打开以选择值，但是当您单击位于选择标记顶部的范围时，没有任何反应。在点击时是否有一个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>

Answer 1

选择框上的范围position是否为absolute？如果是这样，那么使用CSS'指针事件就更方便了。鉴于it's compatible with almost all browsers，我会将其用于制作。 CSS规则通常也比javascript hackery更受欢迎。

将此添加到您的CSS文件中，您将会很高兴。

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

这样做基本上允许光标点击它到它下面的<select>。希望我有所帮助！

Answer 2

您希望在单击范围时触发select标记的点击事件。所以设置一个像这样的jquery函数：

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

WORKING DEMO

Answer 3

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

工作代码段：

＆＃13;

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;
});

＆＃13;

span{
  vertical-align: top;
}

select{
  overflow-y: hidden;
}

＆＃13;

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

＆＃13;

电文读出：

.attr() | jQuery

Answer 4

我想你想要的是标签提供的功能。因此，最好使用<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>会自动获得焦点。

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

4 个答案: