Question

我有以下HTML：

<select class="form-control select-draw">
  <option data-image="20" value="1">Image A</option>
  <option data-image="21" value="2">Image B</option>
</select>

我正在尝试获取value和data-image属性的值，但仅返回value，而data-image的值为{{1} }。我尝试同时使用undefined和attr('data-image')，它们在警报时都返回未定义。我在这里做什么错了？

data('image')

Answer 1

您需要使用find('option:selected')来引用您需要data-image值的所选选项。

$(".select-draw").change(function() {
  var val = $(this).val();
  var img = $(this).find('option:selected').data("image");
  alert(val); //Returns the correct value
  alert(img); //Returns Undefined
  return;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control select-draw">
  <option data-image="20" value="1">Image A</option>
  <option data-image="21" value="2">Image B</option>
</select>

您也可以使用data('image')代替attr('data-image')来获取data属性的值

选择选项属性使用JQuery返回Undefined

1 个答案: