Question

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

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

Answer 1

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

您还可以查看此fiddle，但我的建议是您应该创建一个<div>并将您的内容添加到其中

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

Answer 2

你做不到。

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

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

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

在三列中选择选项标签

3 个答案: