How to get selected option data attribute from HTML select

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>

In that context, this represents the <select> element, not the selected option. — alexhughesking
– alexhughesking, Commented Jan 26, 2017 at 18:55
Possible duplicate of jQuery Get Selected Option From Dropdown — demonofthemist
– demonofthemist, Commented Jan 26, 2017 at 18:56

KAD · Accepted Answer · 2017-01-26 18:55:23Z

3

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

answered Jan 26, 2017 at 18:55

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Spinks · Accepted Answer · 2017-01-26 19:01:18Z

1

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/

answered Jan 26, 2017 at 19:01

Matt Spinks

6,7404 gold badges32 silver badges57 bronze badges

Comments

Kevin Jantzer · Accepted Answer · 2017-01-26 18:57:38Z

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>

Collectives™ on Stack Overflow

How to get selected option data attribute from HTML select

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related