Javascript 在三列中选择选项标记

下面的select标记位于一行中，我需要三列中的select option标记：

汽车
坦克
飞机
直升机
船
潜水艇

根据您提供的图像，仅使用

标记和

CSS

是不可能实现的。要么你必须使用某种插件，要么创建一个

，并相应地将内容放入其中

你也可以看看这个，但我的建议是你应该创建一个

，并把你的内容放进去

另外，我不是那把小提琴的作者，我是在四处浏览时发现的，你不能

您指向的图像使用js触发一个不同的HTML元素（可能是div），其中包含子元素，可能是

li

s和

s等

---

下面可能有一个select（是的，可访问性），但当您想要显示类似的内容时，它是隐藏的。然后，您需要使用JS更新实际的select元素并触发表单上的提交，或者异步将表单数据发布到服务器。

要查找三列，请尝试

  <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>

选择optgroup.column3{
显示：-moz-groupbox；
浮动：左；
宽度：100px；
背景：红色；
}
汽车
坦克
飞机
直升机
船
潜水艇

我有上述问题的图片，但我无法发布，因为我的声誉较差。你可以在commentnice fiddle中添加图片url。有效的，只是有点好笑。

  <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>