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

.........

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

.........

• javascript
• html
• css
• xhtml

• Remove the size attribute. – user1477388 Commented Mar 4, 2013 at 13:59
• Why not use jquery sortable grid, it's built in and easy to use? Just curious. – jnthnjns Commented Mar 4, 2013 at 14:00
• You can't modify the appearance of a select element that way. I remend using a radio instead. It has the same restriction on what type of values can be chosen by the user as a select, but you'll be able to lay them out however you like. – cimmanon Commented Mar 4, 2013 at 14:59

3 Answers 3

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

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)

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.