从物化 select 选项获取数据图标值

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>

从物化 select 选项获取数据图标值

Get data-icon value from materialize select option

select

image

materialize

dropdown