CODEWITHSUNDEEP
javascripthtmlcssxhtml
Bhavesh G
Bhavesh G

Reputation: 3028

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 

.........

Upvotes: 3

Views: 7040

Answers (3)

Oliver Spryn
Oliver Spryn

Reputation: 17348

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>

Upvotes: 3

Scott Saunders
Scott Saunders

Reputation: 30394

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.

Upvotes: 0

karaxuna
karaxuna

Reputation: 26930

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)

Upvotes: 1

Related Questions