How to get data attribute value for selected option

To get the data attribute of the selected option in a <select> element using jQuery, you can use the .data() method. Here's how you can do it:

For example

<select id="ddlProduct" name="ProductId">
    <option value="1" data-name="phone">IPhone</option>
    <option value="2" data-name="phone">Samsung</option>
</select>

jquery data attribute

To get selected option data attribute value you can write your code as shown below.

$('#ddlProduct').change(function () {
    var data = $("#ddlProduct option:selected").data("name");
});

using jquery get selected option data attribute as the following code.

// Assuming your select element has an id of "mySelect"
var selectedOptionData = $('#mySelect option:selected').data('yourAttributeName');

Here's a breakdown of the code:

$('#mySelect option:selected') selects the currently selected option within the <select> element with the ID mySelect.

.data('yourAttributeName') retrieves the value of the data attribute named yourAttributeName from the selected option.