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

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

• javascript
• jquery
• html

• 2 the data attr is in option selector should be $('#device-selection option:selected') – 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 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 Commented Jun 21, 2017 at 10:33

3 Answers 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./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>

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

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./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>

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./change/

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