在三列中选择选项标签答案

【问题标题】：select option tag in three column在三列中选择选项标签
【发布时间】：2014-02-13 15:28:25
【问题描述】：

下面的选择标签在一行中，我需要在三列中使用选择选项标签：

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

【问题讨论】：

我有上述问题的图片，但我无法发布，因为我的声誉较低。
你可以在评论中添加图片url
imgur.com/smrzjyX

标签： javascript html css

【解决方案1】：

根据您提供的图片，仅使用<select> 标签和CSS 是无法实现的。要么你必须使用某种插件，要么创建一个<div> 并将你的内容相应地放入其中。

你也可以看看这个fiddle，但我的建议是你应该创建一个<div>并将你的内容放入其中

ps。我不是我在浏览时发现的那个小提琴的作者

【讨论】：

小提琴不错。有效，只是有点有趣。

【解决方案2】：

你不能。

您指向的图像正在使用 js 触发包含子元素的不同 HTML 元素（可能是 div），可能是 lis 和 <a>s 等。

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

【讨论】：

【解决方案3】：

找三栏请试一试

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

【讨论】：