jQuery extracting value of a custom attribute in <option> field - php

Question

Okay so for example I have declared a custom value in a select for for example
<select id="something">
<option value="1" data="01"></option>
<option value="2" data="02"></option>
<option value="3" data="03"></option>
<option value="4" data="04"></option>
</select>
For some reason I cannot use the value attribute here. I need to use data attribute to extract the value. I tried using jquery as below:
var dataString = {
clicks: $("#clicks").val($(this).find(':selected').attr('data'))
};
But this is not returning the result as expected. In console its showing too much recursion. I am not getting the value of the data attribute here (01, 02, 03 etc). Please help.

Answer 1

I would recommend you to use data-* prefixed attribute which can be accessed using .data()
console.log($("#something option:selected").data("value"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01"></option>
<option value="2" data-value="02"></option>
<option value="3" data-value="03"></option>
<option value="4" data-value="04"></option>
</select>

Answer 2

Try this code
<select id="selectNo">
<option value="1" data-no="01">1</option>
<option value="2" data-no="02">2</option>
<option value="3" data-no="03">3</option>
<option value="4" data-no="04">4</option>
</select>
And Jquery
$("#selectNo").change(function () {
alert($(this).find(':selected').data("no"));
});
Output

Answer 3

I assume this is your dropdown. Try the following:
$("#clicks").val($(this).find('option:selected').attr('data'));

Answer 4

$('#something').change(function(e) {
//var id = $(this).val();
$('#something :selected').each(function(){
var value = $(this).data('id');
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-id="01"></option>
<option value="2" data-id="02"></option>
<option value="3" data-id="03"></option>
<option value="4" data-id="04"></option>
</select>

Answer 5

Try to use like below.
var option = $("#something option:selected").attr("data-value");
Exp:
$("#something").change(function () {
console.log($("#something option:selected").attr("data-value"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01">01</option>
<option value="2" data-value="02">02</option>
<option value="3" data-value="03">03</option>
<option value="4" data-value="04">04</option>
</select>