javascript 选择带有列的多个 Html - 可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25213160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select Multiple Html with columns - possible?
提问by SB2055
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 />.
不使用固定宽度的字体。我有一个选项 + 描述，我想为<select multiple />.
Is this possible with straight css/html, or do I need to look for a plugin?
这可以通过直接的 css/html 实现，还是我需要寻找插件？
回答by hex494D49
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
工作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
工作jsBin
回答by TimSPQR
Just a different approach - FIDDLE.
只是一种不同的方法 - FIDDLE。
Used code from the jQuery 'selectable' and adapted it.
使用来自 jQuery 'selectable' 的代码并对其进行了调整。
Used divs to create the columns.
使用 div 创建列。
CSS
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;
}
回答by will
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.
这不能简单地通过 CSS 实现，也不能跨浏览器兼容。对此的最佳解决方案是使用 jQuery 覆盖选择并动态创建一个下拉列表，可以使用<span>标签或类似的方式对其进行适当的样式设置。
