選択できないオプションのデータ属性HTMLから選択

Question

このデモを見て、選択したオプションのデータ属性を取得できない理由を教えてください。

$('#type-picker').on('change', function (e) { 
 
    var filter = $(this).data("filter"); 
 
    console.log(filter); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectpicker" id="type-picker" data-width="100%" > 
 
    <option data-filter="na" >Select From The List</option> 
 
    <option data-filter="*">Display ALl</option> 
 
    <option data-filter=".type1">Relish</option> 
 
    <option data-filter=".type2">Relish</option> 
 
    <option data-filter=".type3">Relish</option> 
 
</select>