How to use a Select inside a button?

Question

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.

Right now button onclick is triggered if I click 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>

Answer 1

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

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>

Answer 2

According to the W3C HTML5 Specification, the button element cannot have interactive descendants:

Content model:
Phrasing content, but there must be no interactive content descendant.

Since select is an interactive element, putting a select inside a button is not valid html.

Just out of curiosity, I tried playing around with the z-index property to increase the stack order of the select.

JS Bin

Firefox followed the standard and did not allow interaction on the select.

Of course, you can use another structure for the parent element.