如何在按钮内使用“选择"? [英] How to use a Select inside a button?

问题描述

我试图弄清楚如何将选择放置在按钮内，以便可以使用选择来选择内容，但是选择外部的按钮会在单击时执行其他操作.

I am trying to figure out how I could place a select inside a button so that I could use the select to select stuff, but the button outside the select would do other stuff onclick.

整个白色区域是按钮，可以在其中看到选择.我想将所有白色区域用作按钮，如果单击选择，则选择将打开.

This entire white area is button and the select can be seen inside it. I would like to use all the white area as a button and if select is clicked the select would open.

如果我单击选择"，则会立即触发按钮onclick.

Right now button onclick is triggered if I click select.

我可以使用jQuery创建一些东西来检测是否单击了select并触发了按钮单击吗?

Can I create something using jQuery to detect if select is clicked and else button click is triggered?

<button type="button" onclick="doStuff()" class="btn-lg btn-menu col-xs-6">
    Button
    <select>
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
    </select>
</button>

推荐答案

我的第一个解决方案无法跨浏览器工作，因为HTML5不允许按钮内包含交互元素(例如 select )

My first solution didn't work cross-browser, because HTML5 doesn't allow interactive elements (such as select) within buttons.

如Jason van der Zeeuw建议的那样，这种新的解决方案用跨距替换了按钮:

This new solution replaces buttons with spans as Jason van der Zeeuw suggested:

$('span').click(function(event) {
   if(event.target.tagName === 'SPAN') {
       alert('span pressed!');
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  Button
   <select>
      <option value="mon">Monday</option>
      <option value="tue">Tuesday</option>
      <option value="wed">Wednesday</option>
   </select>
</span>

这篇关于如何在按钮内使用“选择"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！