从不同于值的选择选项中获取属性答案

【问题标题】：Get attribute from select option different from value从不同于值的选择选项中获取属性
【发布时间】：2018-09-24 07:37:44
【问题描述】：

在 ajax 调用之后，我以这种方式填充一个选择选项，添加一个值属性和另一个名为 jobDescription 的属性：

$.each(obj, function(key, value) {   
                 $('#mySelect').append($("<option></option>").attr({"value": value.id, "jobDescription": value.jobDescription}).text(value.name)); 
            });

当我选择其中一个选项时，我需要获取 jobDescription 值。为此，我尝试过这种方式

$("#mySelect").on('change', function() {
   console.log($(this).attr("jobDescription"));
});

但它返回undefined。有没有其他方法可以做到这一点？

【问题讨论】：

标签： jquery html attributes select-options

【解决方案1】：

按照您的原始代码，您需要先在.attr之前添加find(':selected').，以便在#mySelect中找到当前选择的<option>。

$(function() {
  $("#mySelect").on('change', function() {
    console.log($(this).find(':selected').attr("jobDescription"));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="someValue" jobDescription="jobDesc1">Lorem Ipsum 1</option>
  <option value="someValue" jobDescription="jobDesc2">Lorem Ipsum 2</option>
  <option value="someValue" jobDescription="jobDesc3">Lorem Ipsum 3</option>
</select>

【讨论】：