How to access data attribute value using jQuery

Question

I want to access the data attribute in jQuery. but every time I try to access it, it returns undefined.

code

<select name="start" id="source">
    <option selected disabled>Select your location</option>
    <option data-lat="74.1833" value="some for php">Gujranwala</option>
    <option data-lat="74.3436" value="some for php">Lahore</option>
    <option data-lat="74.536" value="some for php">sialkot</option>
    <option data-lat="74.0789" value="some for php">gujrat</option>
    <option data-lat="67.0100" value="some for php">Karachi</option>
  </select>

I tried to use

$('#source').attr('data-lat');

when the user selects a parameter that should give the value of the custom attribute. but it doesn’t work .. still get undefined. can someone show me some alternative solution, or if I am wrong about this, please correct it ...

try to provide an example of execution, please. thanks in advance.

If I'm wrong about something explaining the problem, please ignore it, I hope you guys got what I'm trying to say .. :)

Answer 1

, . , data().

$('#source option:selected').data('lat');