Question

我试图在用户点击选择框的某个选项上方后运行一个功能。但是，我正在尝试使用数据属性和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/

Answer 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>

数据属性在selectbox上返回undefined

1 个答案: