select option tag in three column

Question

The below select tag is in one row i need that in three column with select option tag:

<select>
  <optgroup label="Terestrial">
    <option value="Car">Car</option>
    <option value="Tank">Tank</option>
  </optgroup>
  <optgroup label="Air">
    <option value="Airplain">Airplain</option>
    <option value="Helicopter">Helicopter</option>
  </optgroup>
  <optgroup label="Water">
    <option value="Ship">Ship</option>
    <option value="Submarine">Submarine</option>
  </optgroup>
</select>

i have an image of the above question but i cant post because i have less reputation. — user3304633, Feb 13 '14 at 05:48

score 1 · Answer 1 · answered Feb 13 '14 at 05:55

1

According to the Image you provided, what you need to achieve is not possible by just using <select> tag and CSS. Either you'll have to use some sort of plugin, or create a <div> and put your content in it accordingly.

You can also take a look at this fiddle but my suggestion is you should create a <div> and put your content in it

ps. I am not an author of that fiddle i found it while browsing around

answered Feb 13 '14 at 05:55

Aditya Ponkshe

3,840
4
39
58

nice fiddle. effective and only mildly amusing. – Martin Mar 03 '16 at 18:38

score 0 · Answer 2 · answered Feb 13 '14 at 06:04

You can't.

The image you pointed to is using js to trigger a different HTML element (a div, perhaps) containing sub elements, perhaps lis with <a>s or the like.

There may be a select underneath (yay accessibility) but it's hidden when you want something like that displayed. You'd then need to use JS to either update your actual select element and trigger the submit on your form or to post the form data to the server asynchronously.

score 0 · Answer 3 · answered Feb 13 '14 at 06:56

looking for three column Please Try it

  <style>
    select optgroup.column3 {
        display: -moz-groupbox;
        float: left;
        width: 100px;
        background:red;
    }
    </style>

<select>
  <optgroup label="Terestrial" class="column3">
    <option value="Car">Car</option>
    <option value="Tank">Tank</option>
  </optgroup>

  <optgroup label="Air" class="column3">
    <option value="Airplain">Airplain</option>
    <option value="Helicopter">Helicopter</option>
  </optgroup>

  <optgroup label="Water" class="column3">
    <option value="Ship">Ship</option>
    <option value="Submarine">Submarine</option>

</fieldset>
</select>

select option tag in three column

3 Answers3