HTML 中的自定义属性 (data-) 在 JavaScript 中不起作用

Question

>我有一个带有几个选项的选择栏，我正在尝试对一些内容进行排序，我也在尝试实现，如果您再次单击该选项，那么它将切换到升序或降序。

我有这个 HTML 元素：

<select name="theme" id="sortSelect">
<option> -
</option>
<option value="firstName" data-sort-direction="asc">First Name
</option>
<option value="lastName" data-sort-direction="asc">Last Name
</option>
<option value="house" data-sort-direction="asc">House
</option>
</select>

我通过使用此关键字在 JavaScript 中获取值，我添加了一个事件侦听器来侦听"更改"，这导致了一个函数，在该函数中，我得到了这样的值：const selectedValue = this.value;这完全可以正常工作，但是当我尝试像这样在 JavaScript 中获取data-sort-direction='asc'时：let sortDirection = this.dataset.sortDirection;然后它返回未定义。我在这里做错了什么？帮助将不胜感激！

编辑：这是我正在使用的 2 个功能：

function getSortedValues() {
const selectedValue = this.value;
let sortDirection = this.dataset.sortDirection;
if (sortDirection === 'asc') {
this.dataset.sortDirection = 'desc';
} else {
this.dataset.sortDirection = 'asc';
}
console.log(sortDirection);
getSortedStudent(selectedValue, sortDirection);
}
function getSortedStudent(pressedValue, sortDirection) {
let sortedStudents = [];
let direction = 1;
if (sortDirection === 'desc') {
direction = -1;
} else {
sortDirection = 1;
}
sortedStudents = allStudents.sort((a, b) => {
if (a[pressedValue] < b[pressedValue]) {
return -1 * direction;
} else {
return 1 * direction;
}
});
displayList(sortedStudents);
}

Answer 1

this.dataset是<select>的data属性，而不是<option>。您可以通过以下方式获得：

let sortDirection = this.options[this.selectedIndex].dataset.sortDirection;

请注意，这可能仍然是undefined，因为您的初始选项没有data-sort-direction属性。

Answer 2

正如@Tim Lewis的回答中提到的，选择值属性发生了变化，但<option>的其他任何内容都不会被继承。有很多方法可以使用单选按钮、复选框或下拉列表查找所选项目，但我的首选方法是:checked伪选择器。下面是一个示例。

var select = document.querySelector('#sortSelect')
select.addEventListener('change', function(e) {
var selectedOption = document.querySelector('option:checked')
console.log(this.value, selectedOption.dataset);
})

<select name="theme" id="sortSelect">
<option> -
</option>
<option value="firstName" data-sort-direction="asc">First Name
</option>
<option value="lastName" data-sort-direction="asc">Last Name
</option>
<option value="house" data-sort-direction="asc">House
</option>
</select>