Select Multiple Html with columns - possible?

Question

I'm trying to achieve the following:

<select ...>
  <option>Column 1     Column 2</option>
  <option>Line 1       Data 1</option>
  <option>Line 2       Data 2</option>
  <option>Line 3       Data 3</option>
  <option>...          ...</option>
  <option>Line n       Data n</option>
</select>

Without using a fixed-width font. I have an option + description that I would like to display for each of the options in the <select multiple />.

Is this possible with straight css/html, or do I need to look for a plugin?

Instead of struggling with the select, I would simulate it. Create the markup you need and base javascript on it. This way you would bascially create your own "plugin". Otherwise, you could try some out (just google for something like "jquery custom select"). However, I never saw anything close to what you want. Good luck. — lesssugar, Aug 08 '14 at 23:02
Do the two columns contain two difference selectable elements, or are the two columns one single selection? — TimSPQR, Aug 08 '14 at 23:42
@TimSPQR - one single selection. I just want pretty Option <> Description pairing :) — SB2055, Aug 08 '14 at 23:44
selects render differently on different OS/browser combinations. — nycynik, Aug 09 '14 at 00:25
As you can see I just finished the second version which handles even multiple columns. Give it a try and let me know if you found it useful. +1 for the idea ;) — hex494D49, Aug 09 '14 at 02:17

hex494D49 · Accepted Answer · 2014-08-09T02:18:25.107

The first snippet works for two-column select list while the second one can handle multiple columns. Semicolon ; is used as a separator.

// two-column multiple select list
window.onload = function(){
  var s = document.getElementsByTagName('SELECT')[0].options, 
      l = 0, 
      d = '';
  for(i = 0; i < s.length; i++){
    if(s[i].text.length > l) l = s[i].text.length; 
  }
  for(i = 0; i < s.length; i++){
    d = '';  
    line = s[i].text.split(';');
    l1 = (l - line[0].length);
    for(j = 0; j < l1; j++){
      d += '\u00a0'; 
    }
    s[i].text = line[0] + d + line[1];
  }  
};

Working jsBin

// multiple-column multiple select list
window.onload = function(){

  var s = document.getElementsByTagName('SELECT')[1].options, l = [];

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    for(j = 0; j < column.length; j++){
      if(!l[j]) l[j] = 0;
      if(column[j].length > l[j]){
        l[j] = column[j].length;
      }      
    }    
  }  

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    temp_line = '';
    for(j = 0; j < column.length; j++){
      t = (l[j] - column[j].length);
      d = '\u00a0';
      for(k = 0; k < t; k++){
        d += '\u00a0';
      }
      temp_line += column[j] + d;
    }
    s[i].text = temp_line;    
  }  

};

Working jsBin

Very, very cool. Thanks for this, though I am trying to avoid using a fixed-width font, like courier. Is this possible? — SB2055, Aug 09 '14 at 18:57
@SB2055 I'm afraid it's not possible. At least I couldn't achieve it :) You may use `Courier New, Courier, monospace` or `Lucida Console, Monaco5, monospace` which looks quite nice and neutral. Or any other monospace web font. Cheers ;) — hex494D49, Aug 09 '14 at 19:43

score 3 · Answer 2 · answered Aug 09 '14 at 01:02

Just a different approach - FIDDLE.

Used code from the jQuery 'selectable' and adapted it.

Used divs to create the columns.

CSS

#holder .ui-selecting {
    background: #e0e6fa;
}
#holder .ui-selected {
    background: #d1daf4;
    color: white;
}
#holder {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 270px; }
div {
    display: inline-block;
}
li div:first-child {
    width: 100px;
    color: red;
    padding: 3px 3px 3px 10px;
}
li div:nth-child(2) {
    width: 120px;
    color: blue;
    padding: 3px 3px 3px 10px;   
}

score 0 · Answer 3 · edited Aug 09 '14 at 00:27

0

This is not simply achievable via CSS and would not be cross-browser compatible. The best solution for this would be overriding the select using jQuery and create a drop down on the fly which could be styled appropriately using <span> tags or similar.

edited Aug 09 '14 at 00:27

SeinopSys

8,787
10
62
110

answered Aug 09 '14 at 00:06

will

23
2

Select Multiple Html with columns - possible?

3 Answers3

Linked