Call data attribute inside function jquery

Question

I have some dropdown list like this :

<select name="qty" class="mb10" onchange="test()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
    <option value="0">0 rooms</option>
    <option value="1">1 rooms</option>
    <option value="2">2 rooms</option>
    <option value="3">3 rooms</option>
    <option value="4">4 rooms</option>
</select>

And this is my function which called with onchange event :

function test()
{
    var this_plan_type = $(this).data('plan-type');
    var this_plan_id = $(this).data('plan-id');
    var this_plan_day = $(this).data('plan-day');

    alert(this_plan_type);
}

The problem is with onchange event I cannot call data attribute in my <select>. How could I call that data attribute inside function ?

How could I do that ? Maybe you have some example ? @MilindAnantwar — Antonio
– Antonio, Commented May 18, 2017 at 8:10
Put id to the select and use $('#selectQTY').data('plan-type'); — Roy Bogado
– Roy Bogado, Commented May 18, 2017 at 8:11

Satpal · Accepted Answer · 2017-05-18 08:21:12Z

2

You can use .bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value,

<select name="qty" class="mb10" onchange="test.bind(this)()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
</select>

function test() {
  var this_plan_type = $(this).data('plan-type');
  var this_plan_id = $(this).data('plan-id');
  var this_plan_day = $(this).data('plan-day');
  console.clear();
  console.log(this_plan_type, this_plan_id, this_plan_day);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="qty" class="mb10" onchange="test.bind(this)()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
    <option value="0">0 rooms</option>
    <option value="1">1 rooms</option>
    <option value="2">2 rooms</option>
    <option value="3">3 rooms</option>
    <option value="4">4 rooms</option>
</select>

edited May 18, 2017 at 8:21

answered May 18, 2017 at 8:15

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Milind Anantwar Over a year ago

Wow. Interesting...wasn't aware of this sytax :)

Antonio Over a year ago

It's working and @MilindAnantwar answer is working too. Thanks to you both.

Milind Anantwar · Accepted Answer · 2017-05-18 08:14:51Z

Your code is not working because keyword this do not refers to select elements context, it is refering to document instead.

You can

1) either pass object of clicked element as argument in function.

and in js:

function test($selectElement)
{
var this_plan_type = $selectElement.data('plan-type');
var this_plan_id = $selectElement.data('plan-id');
var this_plan_day = $selectElement.data('plan-day');

alert(this_plan_type);
}

2) get element by selector in test method:

 function test()
{
var $selectElement = $("select.mb10")
var this_plan_type = $selectElement.data('plan-type');
var this_plan_id =  $selectElement.data('plan-id');
var this_plan_day = $selectElement.data('plan-day');

alert(this_plan_type);
}

3) Use jquery to attach event to select element:

$(".mb10").change(function(){
   var $selectElement = $(this);
   var this_plan_type =$selectElement.data('plan-type');
   var this_plan_id = $selectElement.data('plan-id');
   var this_plan_day = $selectElement.data('plan-day');
   alert(this_plan_type);
});

maryisdead · Accepted Answer · 2017-05-18 08:23:33Z

Pass the <select> as an argument to test() and use that instead of this (which is bound to the window object in your case).

But honestly, you shouldn't use the onchange attribute at all. jQuery's change() method should absolutely do the work, even in IE11.

function test(mySelect)
{
    var this_plan_type = $(mySelect).data('plan-type');
    var this_plan_id = $(mySelect).data('plan-id');
    var this_plan_day = $(mySelect).data('plan-day');

    alert(this_plan_type);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="qty" class="mb10" onchange="test(this)" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
    <option value="0">0 rooms</option>
    <option value="1">1 rooms</option>
    <option value="2">2 rooms</option>
    <option value="3">3 rooms</option>
    <option value="4">4 rooms</option>
</select>

Collectives™ on Stack Overflow

Call data attribute inside function jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related