Question

我在解决这个问题时遇到了一些麻烦，并想知道是否有人可以把我推向正确的方向。我想要做的是有一个列表，它有两个组件，一个标签和值。所以本质上我想要一个看起来像一个能够向上和向下滚动的表的列表（因为我的大小是预设的，我必须显示所有值），我只是不确定如何处理它。

我的第一种方法是将一个包含所有值的表嵌入div中的溢出：scroll。直到我将它带入移动Opera，溢出不起作用，这是伟大的。

为了快速修复，我将标签和值放入单独的选择列表中，这样做确实有效。除了我不想独立滚动它们，即如果我滚动一个而不是另一个，则标签不匹配它们的值。

我现在采用的一种快速而肮脏的方法就是将它们作为字符串组合成一个选项，但它看起来并不好看，我希望文本对齐：left / text-align：right以便更好地查看。

到目前为止我所拥有的：

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

只是想知道是否有人遇到同样的问题。我对HTML游戏还有点新意，有没有办法在列表中嵌入表格或div？

Answer 1

在select列表元素中，您只能拥有option和optgroup元素。没有其他任何东西可以支持。

理想情况下，您可以使用带有自定义JavaScript滚动条小部件的表格;这将允许您解决Mobile Opera的溢出问题。但是功能齐全的滚动条非常复杂，需要时间来实现。当然，您可以搜索jQuery插件或类似的东西，但您可能不得不求助于部分功能的滚动条，例如不能处理拖动的滚动条。请记住，当他们看到滚动条时，某些用户可能会认为它的工作原理与原生滚动条完全相同。

否则，如果您想保持简单，可以“耦合”两个或多个选择列表，这样当您滚动一个时，其他列表会同步滚动。

例如，使用onscroll事件和scrollTop属性：

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

它适用于Firefox，但我无法在Mobile Opera上进行测试。

这种方法的一个不方便是你会在两个列表之间有一个垂直滚动条;但是，使用CSS应该可以定位第二个列表，以便通过将第一个列表与滚动条的宽度重叠来隐藏滚动条。

Answer 2

如果您尝试执行以下操作，我会有点失落？

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
 </select>

<select>列表HTML </select> </options>中的<options>的多个值

2 个答案: