Jquery data attribute of select option

Question

I want to get the data Attribute of a select Option but it does not work

html

   <select class="form-control" id="device-selection" style="width:300px;">
        <option selected="selected">Choose!</option>
        <option data-width="1080" data-height="1920">Huewai p9</option>
   </select>

JS:

    $('#device-selection').onchange = function() {
        console.log($('#device-selection').data('width'));
        console.log($('#device-selection').data('height'));
    }

I Keep getting this error:

Uncaught TypeError: Cannot set property 'onchange' of null

My Jquery Version is 3.1.1

the data attr is in option selector should be $('#device-selection option:selected') — guradio
– guradio, Commented Jun 21, 2017 at 10:26
@Olipol For some reason $() is returning null. You need to make sure your own code runs after jQuery has been loaded. How and where are you including jQuery? You need to post your entire code. — user5734311
– user5734311, Commented Jun 21, 2017 at 10:31
you are trying to get the data width and height from the select, but the data width and height is attr of the selected option — Mihai T
– Mihai T, Commented Jun 21, 2017 at 10:33

guradio · Accepted Answer · 2017-06-21 10:30:43Z

3

$('#device-selection').on("change", function() {

  console.log($('option:selected',this).data('width'));
  console.log($('option:selected',this).data('height'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="device-selection" style="width:300px;">
        <option selected="selected">Choose!</option>
        <option data-width="1080" data-height="1920">Huewai p9</option>
   </select>

Data attr is in option selector should be $('#device-selection option:selected')

edited Jun 21, 2017 at 10:30

answered Jun 21, 2017 at 10:28

guradio

15.6k4 gold badges38 silver badges64 bronze badges

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

1 Comment

Olipol Over a year ago

I get this warning jQuery.Deferred exception: Cannot read property 'on' of null TypeError: Cannot read property 'on' of null and this error Uncaught TypeError: Cannot read property 'on' of null

Yosvel Quintero · Accepted Answer · 2017-06-21 10:45:49Z

In jQuery there is not method onchange.. Instead you can use .on() to attach event handlers to an element and pass change as the event parameter.

Than, in order to access the data attributes you can use the selected option with: $(this).find('option:selected') in the event handler method;

$('#device-selection').on('change', function() {
  var $selected = $(this).find('option:selected');
  console.log($selected.data('width'));
  console.log($selected.data('height'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="device-selection" style="width:300px;">
  <option selected="selected">Choose!</option>
  <option data-width="1080" data-height="1920">Huewai p9</option>
</select>

Suresh Kamrushi · Accepted Answer · 2017-06-21 10:49:59Z

0

I think you should write like this:

$( "#device-selection" ).change(function() {
    console.log($('#device-selection').data('width'));
    console.log($('#device-selection').data('height'));
});

Jquery documentation: https://api.jquery.com/change/

Check W3shool example :https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_change_ref

edited Jun 21, 2017 at 10:49

answered Jun 21, 2017 at 10:25

Suresh Kamrushi

16.2k13 gold badges79 silver badges93 bronze badges

1 Comment

Olipol Over a year ago

I get this warning jQuery.Deferred exception: Cannot read property 'change' of null TypeError: Cannot read property 'on' of null and this error Uncaught TypeError: Cannot read property 'change' of null

Collectives™ on Stack Overflow

Jquery data attribute of select option

3 Answers 3

1 Comment

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Related