I have a list of elements, each with a data-producttype attribute, I'm trying to grab the value of each attribute, remove any duplicates, and then create an <option> for each data-producttype attribute within a <select> element.

I have the following mark up:

<ul class="product-grid">
    <li data-producttype="foo">product</li>
    <li data-producttype="bar">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="bar">product</li>
</ul>

<select class="product-types">

</select>

With jQuery I've managed to grab one of the data-attributes, so far:

$('.product-grid li').each(function(){
    thisdata = $(this).attr('data-producttype');
    $('.product-types').html("<option>" + thisdata + "</option>");
});

DEMO: http://jsfiddle.net/5zz12qpf/

How could i get all the attributes, remove duplicates and create an <option> element for each attribute?

Any help is appreciated!