如何用它们的值替换选择的所有选项标签？答案

【问题标题】：How can I replace all option labels of a select with their values?如何用它们的值替换选择的所有选项标签？
【发布时间】：2012-02-08 18:18:59
【问题描述】：

如果我的选择元素的值与其标签不同，如何将所有标签替换为对应的values？

其次，如何在不使用任何框架的情况下按字母顺序对列表进行排序？

输入：

<select name="options" >
    <option value="apple">Fruit</option>
    <option value="rye">Bread</option>
    <option value="beer">Beverage</option>  
</select>

输出：

<select name="options" >
    <option value="apple">apple</option>
    <option value="beer">beer</option>  
    <option value="rye">rye</option>
</select>

【问题讨论】：

标签： javascript html

【解决方案1】：

当然，使用getElementsByTagName() 和innerHTML：

var allOptions = document.getElementsByTagName("option");
for (var i=0; i<allOptions.length; i++) {
   allOptions[i].innerHTML = allOptions[i].value;
}

Here it is in action.

要按字母顺序对选项进行排序，请参阅：Javascript to sort contents of select element

【讨论】：

谢谢！如此简洁！如何使用值按字母顺序对列表进行排序？
@SteveBrown 抱歉，我错过了关于排序的部分。请参阅链接的问题以获取对它们进行排序的解决方案。

【解决方案2】：

如果您希望它们相同，您可以简单地省略value 属性 - 然后option 标记内的字符串将作为值发送到服务器。看这里：http://www.w3schools.com/tags/att_option_value.asp。

【讨论】：

虽然这里没有使用 jQuery，但我听说如果你不在选项标签中指定值，jQuery 有时会出现问题。使用 value 属性指定值不是最佳做法吗？
value 属性是可选的，即使您使用的是 DTD Strict，所以我认为省略该属性是标准做法。关于 jQuery，我还没有遇到过类似的情况。但如果您指的是bugs.jquery.com/ticket/5452 中描述的错误，那么它似乎只影响了 IE，并且似乎从 jQuery 1.4.4 开始修复。
也会影响 chrome。 “你不能依赖 jQuery 使用文本内容代替 value 属性。它适用于过滤器，但不一定适用于 DOM 选择。在 Chrome 中，这将显示 1 个而不是 2 个匹配的元素 jsfiddle.net/wNmLF/2 "
我认为这是正确的行为，因为您的选择器过滤器基于属性名称-值对，而第二个下拉列表缺少它。 Firefox 9 和 IE 9 的行为方式相同。如果我也用 CSS 编写这个选择器，这就是我期望它的行为方式。

【解决方案3】：

你可以这样做：

<select name="options" >
    <option value="apple">Fruit</option>
    <option value="rye">Bread</option>
    <option value="beer">Beverage</option>  
</select>

<script>

    var options = document.getElementsByName("options")[0].querySelectorAll("option");
    Array.prototype.slice.call(options).map(function (option) {
        option.innerHTML = option.value;
    });
</script>

【讨论】：

据我所知，querySelectorAll 不是标准 JS 中可用的函数。你也应该有option.innerHTML=option.value，而不是相反。最后这不按字母顺序排序。
我将给你 -1 用于发布不起作用且不能解决问题的代码。如果您回来修复它，将会给 +1。
另外，当我看到其他人发布指向另一个已回答问题的链接时，我正要进行排序。那你要我把我的答案一并删除吗？
嗯，querySelectorAll 是什么？它在什么浏览器中工作？

【解决方案4】：

您可以将其封装在一个函数中以对您的选择进行排序，并在您删除或添加任何元素到您的选择时进行排序。

函数应该是这样的：

function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
}

你应该这样称呼它：

sortSelect(document.getElementsByName("options"));

【讨论】：