从选择选项中获取与值不同的属性

时间:2018-09-24 07:37:45

标签: jquery html attributes select-options

在ajax调用之后,我以这种方式填充选择选项,添加了一个value属性和另一个名为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。还有其他方法吗?

1 个答案:

答案 0 :(得分:1)

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

$(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>