javascript - HTML 多列选择列表

Question

通常创建 html 列表，

<select size=6 name="sel" id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="4">5</option>
    <option value="4">6</option>
    <option value="4">7</option>
    <option value="4">8</option>
    <option value="4">9</option>
</select>

但它显示为，

1
2
3
4
5

相反，我想成为它，

1   2   3   4
5   6   7   8
9   .........

或者

1   3   5   7
2   4   6   8

如何在不使用任何“插件”和“jquery”等的情况下显示它。只想用纯javascript、html、css方式做

.........

Answer 1

这对于输入是不可能的<select>。尝试这样的事情，让你开始：http: //jsfiddle.net/spryno724/z67w9/5/

<ul>
  <li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </li>

  <li>
    <ul>
      <li class="selected">3</li>
      <li>4</li>
    </ul>
  </li>
</ul>

Answer 2

无法修改选择选项的样式，它是系统控制。您应该使用 css 和 html 绘制类似的东西（或者按照建议使用 jquery 之类的库为您完成它）

Answer 3

您不能以这种方式设置选择样式。您必须创建一个自定义小部件，或者使用三个常规选择并在后端合并结果。