Question

使用简单的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?

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

找到类似于您在此处要求的内容： https://stackoverflow.com/a/19184179/6555780

它基本上需要在javascript中组织，以便所选选项立即显示在屏幕上，以下代码取自David的答案，可在此处查看：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 select标记为目标，并根据选择在Javascript中显示代码（默认为--EMPTY - ）

按照下面的评论，以下代码可能有助于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"} }
  ];

Answer 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

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

3 个答案: