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

Question

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

我的第一种方法是在一个带有溢出：滚动的 div 中嵌入一个包含我所有值的表格。在我将它带入 Mobile Opera 之前，这很棒，溢出不起作用。

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

我现在采用的一种快速而肮脏的方法是将它们作为字符串组合到一个选项中，但它看起来并不好，理想情况下我希望 text-align: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>