如何自定义<select>显示值？

Question

我有一个简单的选择：

<select>
    <option value="1" displayvalue="text 1">Very very long text 1</option>
    <option value="2" displayvalue="text 1">Very very long text 2</option>
    <option value="3" displayvalue="text 1">Very very long text 3</option>
</select>

当选择下拉菜单打开时，您会看到"非常长的文本"，如往常。

但是，每当我选择一个选项时，下拉列表关闭时，我希望displayvalue属性在选择框中显示而不是选项的内部文本(即" text1" (。(。

我正在寻找的是：

option.onchange = function(){
    this.text = this.selectedOption.getAttribute("displayvalue");
}

我似乎也无法找到允许我仅更改显示的文本而不是实际值的 option属性。

Answer 1

使用selectedindex

定位选定选项

function gettext(sel) {
  alert(sel.options[sel.selectedIndex].getAttribute('displayvalue'));
}

<select onchange="gettext(this)">
    <option value="1" displayvalue="text 1">Very very long text 1</option>
    <option value="2" displayvalue="text 1" selected>Very very long text 2</option>
    <option value="3" displayvalue="text 1">Very very long text 3</option>
</select>

使用dom侦听器

$elem = document.querySelector('select')
$elem.addEventListener('change', gettext)
function gettext() {
  console.log(this.options[this.selectedIndex].getAttribute('displayvalue'));
}

<select>
  <option value="1" displayvalue="text 1">Very very long text 1</option>
  <option value="2" displayvalue="text 2" selected>Very very long text 2</option>
  <option value="3" displayvalue="text 3">Very very long text 3</option>
</select>