HTML multiple column select list

问题

generally html list is created,

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

but it is displaying as,

1
2
3
4
5

instead i want to be it as,

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

or

1   3   5   7
2   4   6   8

how to display it without using any "pluggins" and "jquery" etc.. just want to do in pure javascript, html, css way

.........

回答1:

This is not possible with a <select> input. Try something like this, to get you started: 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>

回答2:

There is no way to modify style of select options, it's system control. You should draw something like with css and html (or use libraries like jquery as suggested that has done it for you)

回答3:

You can't style a select that way. You'll have to either create a custom widget, or use three regular selects and merge the results on the backend.

来源：https://stackoverflow.com/questions/15203198/html-multiple-column-select-list