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

Question

我正在构建一个表并使用具有枚举下拉列表的列填充它。我想在选择元素被更改时获取属性data-yogaspaceid。我可以触发更改事件，但我尝试检索的属性“data-yogaspaceid”一直返回为“未定义”

这里是选择标签和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

Answer 1

您在<select> 上有数据，但您正试图从选定的<option> 中读取它。只需从<select> 本身阅读即可：

var yogaSpaceId = $(this).attr('data-yogaspaceid');