無法從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>