最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to use a Select inside a button? - Stack Overflow

programmeradmin4浏览0评论

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
Add a ment  | 

4 Answers 4

Reset to default 5

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./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>
发布评论

评论列表(0)

  1. 暂无评论