title: Get all unique data attribute values by value string separated by comma to list
body: <p>I have this dynamic HTML</p>
  
  <pre><code>&lt;select id='posto'&gt;
    &lt;select&gt;
      &lt;ul id="nazioni"&gt;
        &lt;li data-dal="Europa, Mediterraneo"&gt;Italia&lt;/li&gt;
        &lt;li data-dal="Europa, Mediterraneo"&gt;Spania&lt;/li&gt;
        &lt;li data-dal="Asia"&gt;Cina&lt;/li&gt;
        &lt;li data-dal="Europa, Asia, Mediterraneo"&gt;Turchia&lt;/li&gt;
        &lt;li data-dal="Africa, Mediterraneo"&gt;Egitto&lt;/li&gt;
        &lt;li data-dal="Europa"&gt;Francia&lt;/li&gt;
        &lt;li data-dal="Europa"&gt;Svezia&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and I'm trying to fill in the select with  tags with the 'data-dal' values which I'm trying to split into separate values by the comma and space.
  I'm a fresh jQuery and Javascript novice, but I've managed to piece together some sort of code from what I found here on stackOverflow and in the jQuery manual but wasn't able to piece together all the pieces into my desired code.</p>
  
  <pre><code>var items = {};
  $('#nazioni li').each(function () {
    items[$(this).data('dal').split(', ')] = true;
  });
  
  var result = new Array();
  for (var i in items) {
    result.push('&lt;option&gt;' + i + '&lt;/option&gt;');
  }
  
  $('#posto').show().empty().append(result.join());
  
  $('#posto').change(function () {
    var selected = $(this).find('option:selected').text();
    $('li[data-dal=' + selected + ']').show();
    $('li[data-dal!=' + selected + ']').hide();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/urnPG/" rel="nofollow">http://jsfiddle.net/urnPG/</a>
  I jsfiddled it. I'm unable to split the data-dal values into separate values. I'd appreciate any help or pointers in better ways to do this.</p>