Question

我一直在尝试解决我遇到的这个问题。

本质上，我尝试将所有值都改小写，但仍然无法正常工作。

HTML：

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

jQuery：

$("#country").change(function () {
    var test = $("#country").data("code")
    alert(test)
})

并且：

$("#country").change(function () {
    var test = $("#country").attr("data-code")
    alert(test)
})

无论我做什么，我总是将响应定义为undefined，据我所知这应该不是问题，因为jQuery文档有一个类似的示例可以正常工作。 Chrome开发人员工具也没有显示任何错误，因此我很抱歉！

非常感谢您。

Answer 1

$("#country").change(function () {
        var test = $("#country option:selected").attr("data-code")
        alert(test)
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

将option:selected与选择器一起使用以找到选定的选项。

Answer 2

您应该在具有data()属性而不是直接在父元素option上的选定data-*上调用jQuery方法select，例如：

$('#country').change(function() {
  console.log( $(this).find('option:selected').data('code') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
  <option data-code="US" selected="selected" value="United States">United States</option>
  <option data-code="GB" value="United Kingdom">United Kingdom</option>
  <option data-code="AU" value="Australia">Australia</option>
</select>

注意：：我更喜欢使用 .data() 而不是.attr()（在其他答案中建议），因为在这种情况下这样做更有效因为它特别适合data-* attributes。

Answer 3

您没有为data-code属性使用正确的选择器。只是因为它不停留在#country元素上。

因此，请如下修改您的jQuery选择器：

$("#country").change(function () {
        var test = $("#country option:selected").attr("data-code");
        alert(test);
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

那时候您尝试尝试的另一种方式

$("#country").change(function () {
        var test = $("#country option:selected").data("code");
        alert(test);
})

Answer 4

您可以使用find来选择选项，因此不必重复$("#country")

$("#country").change(function () {
  var test = $(this).find("option:selected").data("code")
  alert(test)
})

jQuery.attr（）和data（）始终返回未定义

4 个答案: