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>
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>
Share
Improve this question
asked Nov 18, 2014 at 12:36
FirzeFirze
4,0496 gold badges51 silver badges62 bronze badges
4 Answers
Reset to default 5My 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./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>
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.
You could use a span-tag and style it as a button. That way you keep your code clean and valid 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>
A simplistic 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>