I am trying to create an HTML button that allows the user to select an option to submit. My code does indeed create a button with an embedded drop-down menu, but when the user tries to select a particular option, the button executes immediately. Thus it does not matter which option is selected; it always executes the default option.

I have searched many websites to try to grasp this seemingly simple concept to no avail. Here is my code:

<button class="btn btn-primary btn-sm" id="action">Action
    <select name="options">
        <option value="">Select</option>
        <option value="one">One</option>
        <option value="two">Two</option>

I did not make it clear that I am using js to retrieve the value. I have therefore changed the code slightly but it still executes using the button, AS WELL AS by using the select element. I want only the button to execute by sending the value of the option chosen.

I am also not clear on what is actually being submitted. I thought that the id element would be submitted as an array and then I could access the data I need using document.getElementById("action"). The names, labels, values, options, and ids, confuse me. What am I missing?

  • Sounds like the problem is in your javascript code. – Air Oct 20 '14 at 15:37

A button is an element that is intended to perform an action when clicked; a menu is an element that is intended to select an option when clicked.

If you embed the menu in the button, they are sharing the same space on the screen, so that you cannot click the menu (to select an option) without simultaneously clicking the button (to perform an action).

If you want to keep these actions separate, so that the user can select different options until they are satisfied they have made the right choice, and only then click the button to perform the associated action, the W3 accessibility guidelines give the following example at Using a button with a select element to perform an action:

Example 2: Choosing an action

A select element contains a list of possible actions. The action is not performed until the user presses the "Do it" button.

Example Code:

<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  <button type="submit" name="submit" value="submit">Do It </button>

This example uses an HTML form to associate a button element with other elements. When the button is clicked, the value from the select element will be submitted to the page identified by the form's action attribute, using the method defined by the form's method attribute.

If you're fairly comfortable and want to go beyond what basic, unstyled HTML can do for you, check out this plugin for the Foundation web framework, which gives you drop-down menus that behave like buttons.


I finally got this to work by keeping the select elements inside the button element, without a form, but to use two id tags, one for the button that I referenced in js to call my function, and one for the select element, to reference the option the user selects, inside my js function. I then wrote a separate js function to populate the options from a seperate js file. w3schools.com was helpful in learning the elements and tags I needed, and for seeing examples of how they work.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .