无法从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>