选择多个Html与列 - 可能? [英] Select Multiple Html with columns - possible?
本文介绍了选择多个Html与列 - 可能?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要达到以下目的:
<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 />
中的每个选项显示。
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 />
.
这是否可以使用直接的css / html,或者我需要寻找一个插件吗?
Is this possible with straight css/html, or do I need to look for a plugin?
推荐答案
第一个代码段适用于两列选择列表,而第二个代码段可以处理多列。分号;
用作分隔符。
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];
}
};
工作 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
这篇关于选择多个Html与列 - 可能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文