Javascript 有人创建了同位素下拉菜单吗

有人能在同位素中创建下拉菜单栏吗？我在这里读到了一些关于它的参考资料，但没有具体化。我在上找到了这个例子，虽然我正在寻找五个下拉按钮，像这样也可以用于视频。谢谢你的帮助

HTML

<div id="filters">
    <select>
        <option value="*">All</option>
        <option value=".red">Red</option>
        <option value=".green">Green</option>
        <option value=".blue">Blue</option>
        <option value=".yellow">Yellow</option>        
    </select>    
</div>

<div id="container">
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
</div>

您有两种选择：

1：

---

2：使用html下拉列表

是的，我有一个相同的问题，我想用5个下拉列表进行过滤。试图达到目标。我从下拉列表的所有选定值的组合中提取过滤器字符串，并将其设置为文件管理器。比如，我的容器有4-5种不同的元素，比如体型、膳食类型、蛋白质、饮食性能等。 但是，当我从下拉列表中选择所有值时，例如从body type:varbs、从Food type:smoothy、从Protein:Pork，则不会过滤项目，因为某些记录的数据过滤器与smoothy或Pork等分开，因此当我的过滤器为.carbs.smoothy时，则不会显示任何记录它隐藏所有记录：（因为我没有包含所有属性的记录。但是记录有单独的属性，那么为什么它显示这样的记录，其中至少有一个属性来自所选的下拉值

所以实现了下面的代码，现在继续我的任务。如果有人知道如何解决这个问题，请让我知道

我做了以下代码：

---

谢谢！选择同位素过滤器正是我想要的，但我对javascript的知识有限，因此如果我不得不过度使用它，我可能不得不使用HTML路线。我的问题是选择同位素过滤器。--示例显示了一个下拉选项卡。如果我创建5个下拉选项卡，javascript会发生变化吗？您已经做了修改一个问题得到了回答。现在你提出了另一个问题，因为你没有要求1，正如你的示例所示，但你要求的是组合过滤器。你需要限制提问并获得答案，如果你有更多的问题，那么你可以单独问。无论如何，这是一个组合过滤器，但由于你对js不太了解，我会选择组合过滤器建议引导下拉列表。无论如何，如果你接受我的答案，因为它确实回答了你的第一个问题，你会很好。

$(function() {
    var $container = $('#container'),
    $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
        $container.isotope({
            filter: filters
        });
    });
});

$( function() {
    // init Isotope
    var $container = $('.isotope').isotope({
        itemSelector: '.element-item',
        layoutMode: 'fitRows'
    });
    // filter functions
    var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
        var number = $(this).find('.number').text();
        return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
    }
};

// bind filter on select change
$('#filters').on( 'change', function() {
        // get filter value from option value
        var filterValue = this.value;
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.isotope({ filter: filterValue });
    });
});

jQuery(window).load(function(){    
    var $container = jQuery("#content");

    $container.isotope({
        filter: "*",
        animationOptions: {
            duration: 750,
            easing: "linear",
            queue: false,
        },
        itemSelector: ".span4",
        layoutMode: "fitRows"
    });

    $("#bodytype-1").change(function(){
        $( "#bodytype-1 option:selected" ).each(function() {    
            selector1 = $(this).attr("data-filter");             
            document.getElementById("bodytype-1").setAttribute("data-active",selector1);   
            reorder(1);
            return false;
        });
    }); 

    $("#bodytype-2").change(function(){
        $( "#bodytype-2 option:selected" ).each(function() {
            selector2 = $(this).attr("data-filter");           
            document.getElementById("bodytype-2").setAttribute("data-active",  selector2);   
            reorder(2);
            return false;   
        });
    });

    $("#bodytype-3").change(function(){
        $( "#bodytype-3 option:selected" ).each(function() {
            selector3 = $(this).attr("data-filter");           
            document.getElementById("bodytype-3").setAttribute("data-active", selector3);   
            reorder(3);
            return false;
        });
    });

    $("#bodytype-4").change(function(){
        $( "#bodytype-4 option:selected" ).each(function() {
            selector4 = $(this).attr("data-filter");           
            document.getElementById("bodytype-4").setAttribute("data-active", selector4);   
            reorder(4);
            return false;   
        });
    });

    function reorder( k ){
        var bodytype = $("#bodytype-"+k).attr("data-active");
        if (typeof bodytype === "undefined") {
             bodytype = "";
        }
        var filterString = bodytype;      
        if(filterString=="*"){
            filterString = "*"; 
        }
        $container.isotope({
            filter: filterString,
            animationOptions: {
                duration: 750,
                easing: "linear",
                queue: false,
            },
            itemSelector: ".span4",
            layoutMode: "fitRows"
        });
    }
});