Question

我正在努力实现以下目标：

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

不使用固定宽度的字体。我有一个选项+说明，我想为<select multiple />中的每个选项显示。

这可以用直接的css / html，还是我需要寻找一个插件？

Answer 1

第一个代码段适用于两列选择列表，而第二个代码段可以处理多个列。分号;用作分隔符。

// 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];
  }  
};

工作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;    
  }  

};

工作jsBin

Answer 2

只是一种不同的方法 - FIDDLE。

使用jQuery'selectable'中的代码并对其进行调整。

使用div来创建列。

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

Answer 3

这不是通过CSS可以实现的，也不是跨浏览器兼容的。对此最好的解决方案是使用jQuery覆盖select并动态创建一个下拉列表，可以使用<span>标签或类似方式对其进行适当设置。

选择Multiple Html with columns - 可能吗？

3 个答案: