如何获取选择菜单的数据属性

时间:2017-11-22 14:52:21

标签: jquery

我有以下代码 - 当我尝试记录valid时,它会输出我需要的内容。但是当我输出最大值时,我得到undefined。有什么想法吗?

HTML

<select data-maximum="1" class="missing" name="15077" id="15077">
    <option value="0" selected>0 items missing</option>
    <option value="1" >1 item missing</option>
</select>

的jQuery

$(document).ready(function() {
    $('.missing').change(function() {
        var val = $(this).val();
        var id = $(this).attr("id");
        var maximum = $(this).attr("maximum");
        console.log(maximum);

3 个答案:

答案 0 :(得分:3)

这是因为在使用attr()时,您需要包含data-前缀。话虽如此,我建议您使用data()而不是attr(),在这种情况下,您不需要使用前缀。

&#13;
&#13;
$('.missing').change(function() {
  var val = $(this).val();
  var id = $(this).attr("id");
  var maximum = $(this).data("maximum"); // or: $(this).attr("data-maximum");
  console.log(maximum);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-maximum="1" class="missing" name="15077" id="15077">
    <option value="0" selected>0 items missing</option>
    <option value="1" >1 item missing</option>
</select>
&#13;
&#13;
&#13;

请注意,data()会强制为您提供数据类型,因此在这种情况下maximum将是一个整数。使用attr()将始终返回一个字符串。

答案 1 :(得分:1)

您需要使用.data代替。attr

var maximum = $(this).data("maximum");

答案 2 :(得分:0)

使用.data("maximum")功能或.attr("data-maximum")

$(document).ready(function() {
    $('.missing').change(function() {
        var val = $(this).val();
        var id = $(this).attr("id");
        var maximum = $(this).data("maximum");
        console.log(maximum);
        maximum = $(this).attr("data-maximum");
        console.log(maximum);
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-maximum="1" class="missing" name="15077" id="15077">
    <option value="0" selected>0 items missing</option>
    <option value="1" >1 item missing</option>
</select>