jQuery custom attr is not working in option tag

I have select type with having custom attr in option tag. When i am able to get the val, but not able to get the value in custom attribute.

Here is Jsfiddle

JSFIDDLE

<script>
    jQuery(document).on('change','.selectedItem',function() {
    
        var selectedValue = jQuery(this).val();
        alert(selectedValue);
        alert(jQuery(this).attr("id"));
        var product_id = jQuery(this).attr('rel-product-id');
        alert(product_id);
        var product_name= jQuery(this).attr("rel-product-name");
        alert(product_name);
        
        });
    </script>

Answer

So the problem is that you’re trying to get the values of the attributes from the select itself. What you want to do is to get them from the selected option of the select using option:selected. Like this:

alert(jQuery('option:selected', this).attr('id'));
alert(jQuery('option:selected', this).attr('rel-product-id'));
alert(jQuery('option:selected', this).attr('rel-product-name'));