如何在下拉菜单上显示与所选文本不同的选项文本？答案

【问题标题】：How can I display option text on the dropdown menu that is different than the selected text?如何在下拉菜单上显示与所选文本不同的选项文本？
【发布时间】：2016-08-02 14:05:06
【问题描述】：

使用简单的select，我想在选择选项后在下拉列表中显示一个文本并在选择控件中显示另一个文本。它的概念与选项的label 属性非常相似。

我不确定这是否可能。这是一个不工作示例：

<select>
  <option select-text="-- EMPTY --"> </option>
  <option select-text="YES!!!">Yes</option>
  <option>No</option>
</select>

更新：我没有提到我需要将此解决方案合并到生成的 HTML（ng-table 过滤器）中，因此任何不是纯 HTML 的解决方案都将很难使用。我什至考虑寻找另一个表格控件作为更简单的解决方案，这是非常基本的 - 选择过滤器中的占位符文本。

我针对我的问题创建了一个更具体的问题：
How can I put a placeholder text on ng-table select filter?

【问题讨论】：

标签： html drop-down-menu

【解决方案1】：

这是一个相对简单的解决方案，它依赖于标准 value 属性和自定义 data-* 属性：

function showDisplayValue(e) {
  var options = e.target.options,
      option = e.target.selectedOptions[0],
      i;
  
  // reset options
  for (i = 0; i < options.length; ++i) {
    options[i].innerText = options[i].value;
  }
  
  // change the selected option's text to its `data-display` attribute value
  option.innerText = option.getAttribute('data-display');
}

document.getElementById('foo').addEventListener('change', showDisplayValue, false);

<select id="foo">
  <option data-display="*** BAR ***" value="Bar">Bar</option>
  <option data-display="*** BAZ ***" value="Baz">Baz</option>
  <option data-display="*** QUX ***" value="Qux">Qux</option>
</select>

【讨论】：

很好的解决方案，只有一个错误 - 重新打开下拉列表时，所选值显示在带有星号的列表中。无论如何，正如您在我的问题更新中看到的那样，它仍然对我没有帮助。这是对我最初问题的最佳答案，所以如果没有更好的答案，我可能会标记它。
@HuBeZa，如果您能详细说明所需行为背后的意图，将会有所帮助。
你是对的。由于问题发生了重大变化，我决定创建一个新问题stackoverflow.com/questions/38725612/…

【解决方案2】：

在这里找到了与您要求的类似的东西： https://stackoverflow.com/a/19184179/6555780

它基本上需要用javascript组织，以便选择的选项立即显示在屏幕上，下面的代码取自大卫的答案，可以在这里查看：http://jsfiddle.net/aCb73/

<select name="ref_rubrique" id="ref_rubrique">
    <option value="-- EMPTY --" selected> </option>
    <option value="YES!!!">Yes</option>
</select>
<div id="ref_output"></div>
<script type="text/javascript">

    var selectElement = document.getElementById('ref_rubrique');
    var divElement = document.getElementById('ref_output');

    selectElement.onchange = function () {
        var selectedValue =     selectElement.options[selectElement.selectedIndex].value;
        if (selectedValue == '-- EMPTY --') {
            divElement.innerHTML = '<p>No</p>';
        } else if (selectedValue == 'YES!!!') {
            divElement.innerHTML = '<p>Yes</p>';
        }
    };

</script>

这基本上以 ref_rubique 选择标签为目标，并根据选择在 Javascript 中显示代码（默认为 --EMPTY--）

按照我们下面的 cmets，以下代码可能对 ng-table 有所帮助：

  self.initialSorting = [
    { label: "Id ASC", value: { id: "asc"} },
    { label: "Id DESC", value: { id: "desc"} },
    { label: "Name ASC", value: { name: "asc"} },
    { label: "Name DESC", value: { name: "desc"} }
  ];

【讨论】：

我无法让它工作，但它看起来是个好主意（使用 JQuery 可能更容易）。
哪位不工作？我将上面的代码放入 jsfiddle，它似乎对我来说工作正常（它将文本放在 ref_output div 内的选择框之外）
无论如何它不会解决我的问题，因为我需要将此解决方案合并到生成的 HTML（ng-table 过滤器）中。恐怕比这个功能多样化需要更多的时间。我什至考虑寻找另一个表格控件作为更简单的解决方案。无论如何谢谢：っ）
如果您可以在上面发布更多代码，有人可能会进一步提供帮助，查看 ng-table 文档，您可以更改 ng-table 的 javascript 以更改值和选择框中的标签，我已经用 ng-table 文档中的一些代码更新了我的答案

【解决方案3】：

我的理解是你想在 select-text 属性中打印文本。如果这是您要查找的内容，我已找到此示例。

<select id="mySelect">
  <option select-text="-- EMPTY --"> </option>
  <option select-text="YES!!!">Yes</option>
  <option>No</option>
</select>

$("#mySelect").change(function(){    
   $("#mySelect option:selected").text($("#mySelect").val());
});

这是我发现类似的地方。 HTML select shows value instead of text

【讨论】：