javascript - 如何自定义<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>