Include hidden input with optgroup

Question

Is it possible to to include multiple (or a single) <input type = hidden> nested within an <optgroup>'s <option>?

For example, I might have

<select>
<optgroup label="North America">
    <option value="Canada">Canada</option>
        <input type="hidden" name="capital" value="Ottawa">
    <option value="United States">United States</option>
        <input type="hidden" name="capital" value="Washington D.C.">
    <option value="Mexico">Mexico</option>
        <input type="hidden" name="capital" value="Mexico City">
</optgroup>
...
</select>

If I choose "Canada" could I get "Ottawa" and only "Ottawa" submitted also?

Answer 1

What you are asking for is not exactly possible, but it sounds like the result you want is...

<select name="capital">
  <optgroup label="North America">
    <option value="Ottawa">Canada</option>
    <option value="Washington D.C.">United States</option>
    <option value="Mexico City">Mexico</option>
  </optgroup>
  ...
</select>

When the user selects "Canada" from the drop-down, the value "Ottawa" will be submitted to the server.