Question

我有一个使用物化的简单的基于图标的下拉菜单，如下所示：

<select id="eventopponent" onchange="enableWager(value);" class="icons " >
  <option value="" selected disabled >Select a friend</option>
  <option value="" data-icon="img/no-user.jpg" class="left">Invite New Friend</option>
  <option value="" data-icon="img/david.jpg" class="left">David X.</option>
</select>

在onchange事件中，我想获取所选选项的数据图标。我知道如何找到所选的选项，但是对我来说，获取数据图标值还不清楚。

Answer 1

仅使用纯JavaScript，就可以这样

function enableWager(obj) {
  var icon = obj.options[obj.selectedIndex].getAttribute('data-icon');
  alert(icon);
}

<select id="eventopponent" onchange="enableWager(this);" class="icons " >
  <option value="" selected disabled >Select a friend</option>
  <option value="" data-icon="img/no-user.jpg" class="left">Invite New Friend</option>
  <option value="" data-icon="img/david.jpg" class="left">David X.</option>
</select>

从实现选择选项获取数据图标值

1 个答案: