从物化选择选项中获取数据图标值答案

【问题标题】：Get data-icon value from materialize select option从物化选择选项中获取数据图标值
【发布时间】：2018-07-25 20:58:27
【问题描述】：

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

<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 事件中，我想获取所选选项的数据图标。我知道如何找到选定的选项，但我不清楚检索数据图标值。

【问题讨论】：

标签： image select dropdown materialize

【解决方案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>

【讨论】：