Question

我有一个简单的选择： <选择> 当选择下拉列表打开时，您会像通常那样看到“非常长的文本”。但是，每当我选择一个选项且下拉菜单关闭时，我都希望displayvalue属性显示在选择框中，而不是选项的内部文本（即“ text1”）。我正在寻找的东西是这样的： option.onchange = function（）{ this.text = this.selectedOption.getAttribute（“ displayvalue”）; } 我似乎也找不到能够允许我仅更改显示文本的选项属性，而不是它的实际值。

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>

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

1 个答案: