数据属性在选择框上返回未定义答案

【问题标题】：Data attribute returns undefined on selectbox数据属性在选择框上返回未定义
【发布时间】：2015-02-19 00:15:32
【问题描述】：

一旦用户单击了我的选择框的某个选项上方，我就会尝试运行一个函数。但是，我正在尝试使用数据属性和 jQuery 来实现这一点，但它不起作用。

这是代码：

<select class="form-control" id = "add-languages" style = "margin-top:5px;">
                                    <option value = "">(Select your additional language)</option>
                                    <option value = "en" data-langfullname = "english">English (by default)</option>
                                    <option value = "es" data-langfullname = "spanish">Spanish</option>
                                    <option value = "gr" data-langfullname = "german">German</option>
                                    <option value = "ch" data-langfullname = "chinese">Chinese</option>
                                    <option value = "ru" data-langfullname = "russian">Russian</option>
                                    <option value = "jp" data-langfullname = "japanese">Japanese</option>
                                    <option value = "fr" data-langfullname = "french">French</option>
                                    <option value = "pt" data-langfullname = "portuguese">Portuguese</option>


$(function(){
        $("#add-languages").change(function(){
            alert($(this).data("langfullname"));

        });
    });

这是我的小提琴...谢谢

http://jsfiddle.net/BTtN8/30/

【问题讨论】：

标签： jquery custom-data-attribute rel

【解决方案1】：

使用this，您正在尝试访问<select> 的数据属性。相反，您需要访问所选<option> 的数据属性。

$('option:selected',this).data("langfullname");

在下面试试：

$(function() {
  $("#add-languages").change(function() {
    alert($('option:selected', this).data("langfullname"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="form-control" id="add-languages" style="margin-top:5px;">
  <option value="">(Select your additional language)</option>
  <option value="en" data-langfullname="english">English (by default)</option>
  <option value="es" data-langfullname="spanish">Spanish</option>
  <option value="gr" data-langfullname="german">German</option>
  <option value="ch" data-langfullname="chinese">Chinese</option>
  <option value="ru" data-langfullname="russian">Russian</option>
  <option value="jp" data-langfullname="japanese">Japanese</option>
  <option value="fr" data-langfullname="french">French</option>
  <option value="pt" data-langfullname="portuguese">Portuguese</option>
  <option value="it" data-langfullname="italian">Italian</option>
  <option value="po" data-langfullname="polish">Polish</option>
  <option value="tu" data-langfullname="turkish">Turkish</option>
  <option value="du" data-langfullname="dutch">Dutch</option>
  <option value="ar" data-langfullname="arabic">Arabic</option>
  <option value="ko" data-langfullname="korean">Korean</option>
</select>

【讨论】：

绝对正确。谢谢！