0

我有这个动态 HTML

<select id='posto'>
  <select>
    <ul id="nazioni">
      <li data-dal="Europa, Mediterraneo">Italia</li>
      <li data-dal="Europa, Mediterraneo">Spania</li>
      <li data-dal="Asia">Cina</li>
      <li data-dal="Europa, Asia, Mediterraneo">Turchia</li>
      <li data-dal="Africa, Mediterraneo">Egitto</li>
      <li data-dal="Europa">Francia</li>
      <li data-dal="Europa">Svezia</li>
    </ul>

我正在尝试使用带有“data-dal”值的标签填充选择，我试图通过逗号和空格将其拆分为单独的值。我是一个新的 jQuery 和 Javascript 新手，但我已经设法将我在 stackOverflow 和 jQuery 手册中找到的一些代码拼凑在一起，但无法将所有部分拼凑成我想要的代码。

var items = {};
$('#nazioni li').each(function () {
  items[$(this).data('dal').split(', ')] = true;
});

var result = new Array();
for (var i in items) {
  result.push('<option>' + i + '</option>');
}

$('#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();
});

http://jsfiddle.net/urnPG/ 我把它弄乱了。我无法将 data-dal 值拆分为单独的值。我将不胜感激以更好的方式提供任何帮助或指示。

4

1 回答 1

4

我不确定我是否正确理解了您的问题。但是，让我尽我所能帮助你。首先这里更新了JSFIDDLE。

我可以将<li>元素值拆分为一个唯一值数组并<Select>用这些值填充。

$('#nazioni li').each(function () {
   var arr = $(this).data('dal').split(", ");
   items = items.concat(arr);
 });
 var sorted = unique(items);

此函数获取列表的唯一值。

function unique(list) {
   var result = [];
   $.each(list, function(i, e) {
     if ($.inArray(e, result) == -1) result.push(e);
       });
   return result;
}

然后我尝试显示<li>与所选下拉值对应的所有元素。

于 2013-01-11T18:55:35.790 回答