无法从动态构建的表中的选定选项获取数据属性

Question

我正在构建一个表并用一个包含枚举下拉列表的列填充它。我希望在更改时获取select元素的属性data-yogaspaceid。我可以触发更改事件但我正在尝试检索的属性'data-yogaspaceid'仍然以'undefined'的形式返回

这是select标签和javascript

$(function() {
  $(document).on('change', '#statusDropDown', function() {
    // yogaSpaceid keeps coming up undefined
    var yogaSpaceId = $("#statusDropDown").find(':selected').attr('data-yogaspaceid');
  });
});

<td>
    <select class="btn btn-default btn-lg dropdown-toggle" data-val="true" data-val-required="The Status field is required." data-yogaspaceid="12" id="statusDropDown" name="item.Status"><option value="0">Listed</option>
    <option selected="selected" value="1">Unlisted</option>
    </select>                        
</td>

变量yogaSpaceId的值应为12，而应为undefined