Question

我有一个元素列表，每个元素都有一个data-producttype属性，我试图获取每个属性的值，删除所有重复项，然后为每个data-producttype属性创建一个<option>一个<select>元素。

我有以下标记：

<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>

到目前为止，我已经设法抓住了一个数据属性：

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

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

我如何获取所有属性，删除重复项并为每个属性创建<option>元素？

感谢任何帮助！

Answer 1

试试这个：

var products = $.unique($('.product-grid li').map(function(item, index){
   return $(this).attr('data-producttype');
 }));

var productsHtml = "";
$.each(products, function(index, item){
    productsHtml += "<option>" + item + "</option>";
});



$("select.product-types").html(productsHtml);

JsFiddle：http://jsfiddle.net/5zz12qpf/6/

Answer 2

您的一个问题是，html()会替换所有内容，因此您最终会选择最后一个选项，因为所有其他选项都会被替换。

存储值的简单数组将起作用，如果数组中已存在值，则不创建选项

var productTypes=[];
$('.product-grid li').each(function(){
   var thisdata = $(this).attr('data-producttype');
    /* only proceed if value doesn't already exist */
    if($.inArray(thisdata, productTypes) === -1){
        productTypes.push(thisdata);
        $('.product-types').append("<option value='" + thisdata + "'>" + thisdata + "</option>");
    }       
 });

的 DEMO

从元素中获取data- *属性并在<select> </select>中显示

2 个答案: