如何使用 jquery 获取 html 选择>选项标记自定义属性值？

Question

我研究过，在html中，只需在html标记中添加data-*属性，就可以添加自定义属性。我从数据库中填充select > option标签：

<td>
<select onchange='setattr(this)' id='pitemnamerow"+ cnt +"' class='pitemname select2bs4 tselect'>
<option selected='selected'></option>
</select>
</td>

我的Jquery并且已经设置了我的自定义标签

for (i in data.branditms) {
$('#pitemname'+brndid.id).append($('<option>', {
value: data.branditms[i]['item_id'],
text: data.branditms[i]['item_name'],
data-um: data.branditms[i]['um'], //custom-tag
}));

DOM结果：

<select onchange="setattr(this)" id="pitemnamerow1" class="select2bs4 pitemname tselect select2-hidden-accessible" data-select2-id="pitemnamerow1" tabindex="-1" aria-hidden="true">    
<option selected="selected" data-select2-id="81"></option>
<option value="0-RKM51" data-um="PC/s" data-select2-id="84">0-RING 2"DIAMETER</option>
<option value="UYD983" data-um="M" data-select2-id="84">Parts Wheel</option>
</select>

现在，当我尝试访问自定义属性值时，它显示undefine:

function setattr(brnditem){
var test = $(this).find('.pitemname').data('um');
console.log(test);  
}

PS:My的table row和select > options也是动态的

知道吗？

Answer 1

尝试检查以下内容：

var test = $(brnditem).find('option:selected').data('um');

也要确保在"选择"标签上调用该函数之前就已经定义好了

Answer 2

您应该调用data()而不是attr()，重写代码如下：

function setattr(brnditem)
{
var test = $(brnditem).find("option:selected").data('um');
console.log(test);  
}