如何从 HTML 选择中获取选定的选项数据属性

Question

I am working on the below code. Why am I not able to get the selected option's data attribute?

 $('#type-picker').on('change', function (e) { var filter = $(this).data("filter"); console.log(filter); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectpicker" id="type-picker" data-width="100%" > <option data-filter="na" >Select From The List</option> <option data-filter="*">Display ALl</option> <option data-filter=".type1">Relish</option> <option data-filter=".type2">Relish</option> <option data-filter=".type3">Relish</option> </select>

Answer 1

$(this) will return the select itself, which has no data-filter , you need to get the selected option to obtain its filter attribute

 $('#type-picker').on('change', function (e) { var filter = $(this).find('option:selected').data("filter"); console.log(filter); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectpicker" id="type-picker" data-width="100%" > <option data-filter="na" >Select From The List</option> <option data-filter="*">Display ALl</option> <option data-filter=".type1">Relish</option> <option data-filter=".type2">Relish</option> <option data-filter=".type3">Relish</option> </select>

Answer 2

You are getting the data attribute of the select , not the option . Use $("#type-picker option:selected") .

$('#type-picker').on('change', function (e) {
  var filter =  $("#type-picker option:selected").data("filter");
  console.log(filter);
});

Working Example: https://jsfiddle.net/mspinks/zdng9s5o/2/

Answer 3

You need to get the selected <option> inside the <select> . this keyword references the <select>

Here's how you can do it without jQuery

 $('#type-picker').on('change', function (e) { var filter = this.children[this.selectedIndex].dataset.filter // this would also work //var filter = this.selectedOptions[0].dataset.filter console.log(filter); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectpicker" id="type-picker" data-width="100%" > <option data-filter="na" >Select From The List</option> <option data-filter="*">Display ALl</option> <option data-filter=".type1">Relish</option> <option data-filter=".type2">Relish</option> <option data-filter=".type3">Relish</option> </select>