时间戳

首页 > 解决方案 > 如何自定义显示价值？我有一个简单的选择： <select> <option value="1" displayvalue="text 1">非常长的文本 1</option> <option value="2" displayvalue="text 1">非常长的文本2</option> <option value="3" displayvalue="text 1">Very very long text 3</

问题描述

标签： javascripthtmlselect

解决方案

使用目标选定的选项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>

推荐阅读