How to use the "Select Inside Button" button?

Question

I'm trying to figure out how I could place a selection inside a button so that I can use the selection to select the material, but the button outside of the selection will do other things onclick.

All this white area is a button, and in it you can see the choice. I would like to use the entire white area as a button, and if I click on a click, a selection will open.

Currently, the onclick button is triggered if I press select.

Can I create something using jQuery to determine if the click button is clicked and the click button is clicked?

<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 did not work in a cross browser because HTML5 does not allow interactive elements (e.g. select ) within buttons.

This new solution replaces buttons with spaces, as suggested by Jason van der Zeyuv:

 $('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 HTML5 W3C specification, a button element cannot have interactive children:

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

Since select is an interactive element , the placement inside the button is invalid html.

Just out of curiosity, I tried to play with the z-index attribute to increase the stack order for the selection.

Js bin

Firefox followed the standard and did not allow interaction when choosing.

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

Answer 3

You can use the span tag and style it as a button. That way you keep your code clean and action and still achieve your goal.

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

Answer 4

The simplest solution:

 <button type="button" onclick="doStuff(event)" 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> <script> function doStuff(event) { if(event.target.nodeName === 'BUTTON') { // do stuff } } </script>