选择Multiple Html with columns – 可能吗？
我正在努力实现以下目标：
Column 1 Column 2 Line 1 Data 1 Line 2 Data 2 Line 3 Data 3 ... ... Line n Data n 不使用固定宽度的字体。 我有一个选项+描述，我想为中的每个选项显示。
这可能是直接的css / html，还是我需要寻找一个插件？
第一个代码段适用于双列选择列表，而第二个代码段可以处理多个列。 分号; 用作分隔符。
// 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
只是一种不同的方法 – 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; }
这不仅可以通过CSS实现，也不会跨浏览器兼容。 对此最好的解决方案是使用jQuery覆盖select并动态创建一个下拉列表，可以使用标签或类似方式进行适当的样式设置。