6

我只是想知道是否可以在 html 中使用带有 data- 属性的选项元素，如果可以的话，如何检索这个值。

更详细。可以说我有以下代码：

<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 吗？

4

4 回答 4

7

是的，这是可能的。任何属性值都可以通过以下方式获得：

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

并设置：

$('option:selected').attr('data-lng', 1234);
于 2013-10-04T17:09:06.180 回答
5

使用设置属性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
于 2013-10-04T17:12:16.683 回答
2

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

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

这样做的好处.attr是您可以进行类型转换，因此在这种情况下您将获得数值而不是字符串。

于 2013-10-04T17:13:21.330 回答
2

我想补充一下，如果您想针对特定的<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"));
于 2018-05-29T14:34:20.830 回答