通过JQuery从SELECT标记获取选定的Data属性

Question

I am trying to get a selected option's data attribute from a SELECT.

            <select name="" class="col-xs-12" id="my_sel">
                <option value="0">Select from list</option>
                <option value="op1" data-cost="100" id="use1">Option 1</option>
                <option value="op2" data-cost="200" id="use2">Option 2</option>
                <option value="op3" data-cost="300" id="use3">Option 3</option>
                <option value="op4" data-cost="400" id="use4">Option 4</option>
            </select>

All I want is to get the selected Data Tag "data-cost".

I tried this:-

var speed = $("#my_sel").data("cost");

Any idea?

Thanks.

Answer 1

To get the selected options data-cost value try this...

var speed = $('#my_sel').find(":selected").attr('data-cost');

For more information on how .data() differs from .attr() check out this answer. https://stackoverflow.com/a/8708345