在选择更改时，获取数据属性值答案

【问题标题】：On select change, get data attribute value在选择更改时，获取数据属性值
【发布时间】：2011-12-01 17:31:23
【问题描述】：

以下代码返回'未定义'...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

【问题讨论】：

使用 $(this).find(':selected') 还是 $(this).children('option:selected') 更好？
看到这个问题：stackoverflow.com/questions/648004/…

标签： jquery

【解决方案1】：

你需要找到选中的选项：

$(this).find(':selected').data('id')

或

$(this).find(':selected').attr('data-id')

虽然首选第一种方法。

【讨论】：

我在最初的帖子中错误地使用了 attr()，我的意思是 data()，但它为我返回了“未定义”。
我刚刚遇到这个问题，我想知道第一种方法是出于性能原因还是其他原因？ @乔丹布朗
@Clarkey 我的猜测是 data() 比 attr() 更快，因为 attr() 必须做额外的工作来确定它是什么类型的属性。只是一个猜测。

【解决方案2】：

尝试以下方法：

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

您的更改订阅者订阅了选择的更改事件，因此this 参数是选择元素。您需要找到选定的子节点以从中获取数据 ID。

【讨论】：

截至 2016 年，find() 比 children() 快得多，即使在这种情况下，我们只有树的深度为 2。

【解决方案3】：

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

【讨论】：

请始终努力通过 StackOverflow 上的解释和/或参考（即使解决方案很简单/“不言自明”）来支持您发布的代码块，因为不是每个人都熟悉给定语言的语法 /行为/表现。

【解决方案4】：

原版 Javascript：

this.querySelector(':checked').getAttribute('data-id')

【讨论】：

请始终努力通过 StackOverflow 上的解释和/或参考（即使解决方案很简单/“不言自明”）来支持您发布的代码块，因为不是每个人都熟悉给定语言的语法 /行为/表现。

【解决方案5】：

您可以将context 语法与this 或$(this) 一起使用。这和find()的效果一样。

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

作为微优化问题，您可能会选择find()。如果您更喜欢打代码，那么上下文语法会更简短。基本上归结为编码风格。

这里是a relevant performance comparison。

【讨论】：

【解决方案6】：

$('#foo option:selected').data('id');

【讨论】：

请始终努力通过 StackOverflow 上的解释和/或参考（即使解决方案很简单/“不言自明”）来支持您发布的代码块，因为不是每个人都熟悉给定语言的语法 /行为/表现。
OP 在 select 元素上没有id 属性（由于this 的实用性，因此不需要）。
这也适用于 select2 库

【解决方案7】：

也许是一种更优雅的方式

$('option:selected', this).data('id')

【讨论】：

【解决方案8】：

这对我有用

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

和脚本

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});

【讨论】：

请始终努力通过 StackOverflow 上的解释和/或参考（即使解决方案很简单/“不言自明”）来支持您发布的代码块，因为不是每个人都熟悉给定语言的语法 /行为/表现。

【解决方案9】：

通过这个可以获取文本、值和数据属性。

<select name="your_name" id="your_id" onchange="getSelectedDataAttribute(this)">
    <option value="1" data-id="123">One</option>
    <option value="2" data-id="234">Two</option>
</select>

function getSelectedDataAttribute(event) {
    var selected_text = event.options[event.selectedIndex].innerHTML;
    var selected_value = event.value;
    var data-id = event.options[event.selectedIndex].dataset.id);    
}

【讨论】：