< options>的多个值在< select>列出HTML [英] multiple values for <options> in <select> list HTML
问题描述
我在解决这个问题时遇到了一些麻烦，并想知道是否有人能把我推向正确的方向。我想要做的是有一个列表，它有两个组件，一个标签和一个值。所以实质上我想要一个看起来像一个能够上下滚动的表格的列表（因为我的大小是预设的，我必须显示所有的值），我只是不知道如何处理它。
我的第一种方法是将所有值都嵌入到带有overflow：scroll的div中。这是非常好的，直到我把它带入Mobile Opera，溢出不起作用。
为了快速解决问题，我将标签和值分别放入单独的选择列表中，这些列表工作起来并且看起来不错。除了我不想独立滚动它们，即如果滚动一个而不滚动另一个，则标签与它们的值不匹配。
现在我只是将它们作为字符串合并到一个选项中，但它看起来不太好，而且我最好喜欢文本对齐：left / text-align：right for better viewing。
到目前为止：
var statusVarLabel = [标签1标签2标签3标签4标签5标签6标签7标签8标签9标签10标签11，标签12，标签13，标签14，标签15，标签16，标签17，标签18，标签19，标签20
var statusVarInfo = [变量1，变量2，变量3，变量4，变量5，变量6，变量7，变量8，变量9变量10变量11变量12变量13变量14变量15变量16变量17变量18变量变量19，变量20];
函数getStatus（）{
var varContainer = document.getElementById（varContainer）;
varContainer.size = statusVarLabel.length;
tabSpacing = 0;
for（var i = 0; i< statusVarLabel.length; i ++）{
if（tabSpacing< statusVarInfo [i] .length）
tabSpacing = statusVarInfo [i] .length;
};
for（var i = 0; i< statusVarLabel.length; i ++）{
var check = 0; （var j = 0; j
check = 1;
休息;
}
};
var stringSpacing =; （var k = 0; k<（tabSpacing-statusVarInfo [i] .length）+5; k ++）{
stringSpacing = stringSpacing +;
};
if（check == 0）
addOption（varContainer，statusVarLabel [i] + stringSpacing + statusVarInfo [i]，i）;
};
}
只是想知道有没有人遇到同样的问题。我对HTML游戏还是有点新鲜的，有没有一种方法可以将表格或div嵌入到列表中？
在中选择列表元素，您只能有选项和 optgroup 元素。没有其他支持。
理想情况下，您可以使用带有自定义JavaScript滚动条小部件的表格;这将允许您解决Mobile Opera的溢出问题。但功能齐全的滚动条非常复杂，需要时间来实现。当然，你可以搜索一个jQuery插件或类似的东西，但你可能不得不求助于一个部分功能的滚动条，例如一个不处理拖动的滚动条。请记住，当他们看到一个滚动条时，某些用户可能会认为它会像原生滚动条一样工作。
否则，如果您想保持简单，可以耦合两个或更多的选择列表，这样当你滚动一个时，其他的可以同步滚动。 例如，使用 onscroll 事件和 scrollTop 属性：
HTML
< div id =varContainer>
< select id =seVarLabelsstyle =text-align：left>< / select>
< select id =seVarInfosstyle =text-align：right>< / select>
< / div>
JavaScript
var varContainer =文档。 getElementById（varContainer）;
var seVarLabels = document.getElementById（seVarLabels）;
seVarLabels.size = statusVarLabel.length;
var seVarInfos = document.getElementById（seVarInfos）;
seVarInfos.size = statusVarInfo.length;
seVarLabels.onscroll = function（）{
seVarInfos.scrollTop = this.scrollTop;
};
seVarLabels.onclick = function（）{
seVarInfos.selectedIndex = this.selectedIndex;
}
seVarInfos.onscroll = function（）{
seVarLabels.scrollTop = this.scrollTop;
}
seVarInfos.onclick = function（）{
seVarLabels.selectedIndex = this.selectedIndex;
for（var i = 0; i< statusVarLabel.length; i ++）{
addOption（seVarLabels，statusVarLabel [i]，i）;
addOption（seVarInfos，statusVarInfo [i]，i）;
}
它在Firefox中有效，但我无法在Mobile Opera上进行测试。 / p>
这种方法的不便之处在于，您将在两个列表之间有一个垂直滚动条;但是，使用CSS，应该可以定位第二个列表，以便通过将第一个列表与宽度滚动条相重叠来隐藏该滚动条。
I'm having a little trouble attacking this problem and wondered if anyone could push me in the right direction. What I would like to do is have a list that's have two components, a label and value. So in essence I would like a list that looks like a table with the ability to scroll up and down (since my size is preset and I have to display all the values), I'm just not sure how to approach it.
My first approach was just to embed a table with all my values inside of a div with overflow:scroll. Which was great until I brought it into Mobile Opera, where overflow doesn't work.
For a quick fix I threw my labels and values into separate select lists, which does work and look good. Except I don't want to have to scroll them independently, i.e. the labels weren't matching their values if I scrolled one and not the other.
A quick and dirty approach I have now is just combining them as strings into a single option, but it does not really look good and I would ideally like to text-align:left / text-align:right for better viewing.
What I have so far:
var statusVarLabel = ["label 1","label 2","label 3","label 4","label 5","label 6","label 7","label 8","label 9","label 10","label 11","label 12","label 13","label 14","label 15","label 16","label 17","label 18","label 19","label 20"];
var statusVarInfo = ["variable 1","variable 2","variable 3","variable 4","variable 5","variable 6","variable 7","variable 8","variable 9","variable 10","variable 11","variable 12","variable 13","variable 14","variable 15","variable 16","variable 17","variable 18","variable 19","variable 20"];
function getStatus(){
var varContainer = document.getElementById("varContainer");
varContainer.size = statusVarLabel.length;
tabSpacing = 0;
for (var i=0; i < statusVarLabel.length; i++) {
if (tabSpacing < statusVarInfo[i].length)
tabSpacing = statusVarInfo[i].length;
};
for (var i=0; i < statusVarLabel.length; i++) {
var check = 0;
for (var j=0; j < varContainer.length; j++) {
if ( statusVarLabel[i] == varContainer.options[j].text.slice(0,statusVarLabel[i].length)){
check = 1;
break;
}
};
var stringSpacing = "";
for (var k=0; k < (tabSpacing-statusVarInfo[i].length)+5; k++) {
stringSpacing = stringSpacing + " ";
};
if (check == 0)
addOption(varContainer, statusVarLabel[i] + stringSpacing + statusVarInfo[i], i);
};
}
Just wondering if anyone out there has run into the same problem. I'm still a bit new to the HTML game, is there a way to embed a table or div within a list?
In select list elements, you can only have option and optgroup elements. Nothing else is supported.
Ideally, you could use a table with a custom JavaScript scrollbar widget; this would allow you to work around Mobile Opera's problems with overflow. But a fully functional scrollbar is quite complex and it takes time to implement. Of course you can search for a jQuery plugin or something similar, but you might have to resort to a partially functional scrollbar, for example one that does not handle dragging. Just keep in mind that when they see a scrollbar, certain users may expect that it will work exactly like a native scrollbar.
Otherwise, if you want to keep it simple, it is possible to "couple" two or more select lists so that when you scroll one, the others scroll synchronously.
For example, using the onscroll event and the scrollTop property:
HTML
<div id="varContainer">
<select id="seVarLabels" style="text-align: left"></select>
<select id="seVarInfos" style="text-align: right"></select>
</div>
JavaScript
var varContainer = document.getElementById("varContainer");
var seVarLabels = document.getElementById("seVarLabels");
seVarLabels.size = statusVarLabel.length;
var seVarInfos = document.getElementById("seVarInfos");
seVarInfos.size = statusVarInfo.length;
seVarLabels.onscroll = function () {
seVarInfos.scrollTop = this.scrollTop;
};
seVarLabels.onclick = function () {
seVarInfos.selectedIndex = this.selectedIndex;
}
seVarInfos.onscroll = function () {
seVarLabels.scrollTop = this.scrollTop;
}
seVarInfos.onclick = function () {
seVarLabels.selectedIndex = this.selectedIndex;
}
for (var i=0; i < statusVarLabel.length; i++) {
addOption(seVarLabels, statusVarLabel[i], i);
addOption(seVarInfos, statusVarInfo[i], i);
}
It worked in Firefox, but I could not test it on Mobile Opera.
An inconvenient of this approach is that you will have a vertical scrollbar between the two lists; however, using CSS it should be possible to position the second list so that it hides that scrollbar by overlapping the first list by the scrollbar's width.
这篇关于< options>的多个值在< select>列出HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
