带有数据属性的HTML Option元素。是否可能，如果是这样，如何使用jQuery检索值？

Question

我只是想知道在具有数据属性的html中是否具有选项元素是否可行，因此，如果可行，则如何检索此值。

更加具体。可以说我有以下代码：

<select name="areas" id="areas">
    <option value="1" data-lat="12.243" data-lng="32.43242">Area name</option>
    <option value="2" data-lat="14.243" data-lng="34.43242">Area name</option>
    <option value="3" data-lat="16.243" data-lng="36.43242">Area name</option>
    <option value="4" data-lat="18.243" data-lng="38.43242">Area name</option>
</select>

那么，是否可以通过jQuery从所选选项中获取data-lat和data-lng？

Answer 1

是的，这是可能的。任何属性值都可以通过：

$('option:selected').attr('data-lng')

并设置为：

$('option:selected').attr('data-lng', 1234);

Answer 2

您可以使用.data从元素中检索数据属性

$('#areas options').each(function(){
    console.log($(this).data('lat'), $(this).data('lng'));
}

这个优于.attr的优点是你得到了类型转换，所以在这种情况下你将获得一个数字值，而不是一个字符串。

Answer 3

使用setAttribute设置属性：

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .setAttribute('data-lng', 'foo');

使用getAttribute获取属性：

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .getAttribute('data-lng');

获取和设置：

var el = document.getElementById('areas')
    .getElementsByTagName('option')[index];
el.getAttribute('data-lng');
el.setAttribute('data-lng', 'foo');

注1我使用过document.getElementById('areas').getElementsByTagName('option')[index]，因为可能是更多的跨浏览器，但你可以使用

• document.getElementById('areas').getElementsByTagName('option')[index]
• document.getElementById('areas').options[index]
• document.getElementById('areas')[index]

注2我使用过setAttribute和getAttribute，因为它们更像是跨浏览器，但你也可以使用dataset：

el.dataset.lng;            // get
el.dataset.lng = 'foo';    // set

Answer 4

我想补充一下，如果你想针对特定的<select>

您还可以传递容器元素，以便仅选择该元素的<options>。

// For user with events like .on("change") etc.
console.log($("option:selected", this).attr("data-lat")); 

要么

console.log($("option:selected", "#areas").attr("data-lat"));