Question

我有这个动态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'值的标签填充select，我试图用逗号和空格分成单独的值。我是一个新鲜的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/ 我jsfiddled它。我无法将data-dal值拆分为单独的值。我会感谢你提供更好的帮助或指导。

Answer 1

我不确定我是否理解你的问题。但是，让我尽我所能帮助你。首先是JSFIDDLE Updated.

我可以将<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>元素。

通过以逗号分隔的值字符串获取所有唯一数据属性值

1 个答案: