javascript - 如何让下拉菜单表现得像复选框？

Question

我有点菜鸟，但在我在这里找到的一个 JavaScript 片段的帮助下，我仍然设法做出了一些东西（需要尽快挖掘它，但现在，我的问题:)

我正在制作这个网站：manu.mymaterial.org，我希望它可以使用下拉菜单以相同的方式对图像进行排序，就像现在使用 checkboxes 一样。我已经尝试过，但似乎没有任何效果。

如果你有时间，我有这个原型供你解决问题。我将非常感谢帮助:)

我希望能够使用下拉菜单（现在不起作用）获得相同的结果，就像复选框（现在起作用）一样

https://codepen.io/manujarvinen/pen/BaRzGVa

如果我不够清楚或缺少某些信息，请告诉我。我很乐意为您获取这些信息。

干杯!

马努

gearnoodle.com

编辑：这个问题的答案太棒了！但在我的第二个问题中得到了更完美的答案：同时使用复选框和下拉菜单准确过滤- 太棒了！

---

manu.mymaterial.org网站的图片，只是为您提供一些背景信息：

这就是我希望的样子：

var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {

  var selectedFilters = [];

  $filterCheckboxes.filter(':checked').each(function() {
    var v = this.value;
    if (selectedFilters.indexOf(v) === -1)
        selectedFilters.push(v);
  });

  $('.animal' && '.filterDiv')
    .hide()
    .filter(
       function(_,a) {
          var itemCat = $(a).data('category').split(' ');
          return selectedFilters.every(
            function(c){
               return itemCat.indexOf(c) > -1;
            })
    })
    .show();

}

$filterCheckboxes.on('change', filterFunc);

body {
width: 100%;
text-align: center;
background-color: black;
color: white;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
}

<!-- Help needed in this URL: https://stackoverflow.com/q/68315184/4383420 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
<div class=grid>
    <select>
    <option value="showAll">show all</option>
    <option value="violet">violet</option>
    </select>
    <select>
    <option value="showAll">show all</option>
    <option value="blue">blue</option>
    </select>
    <select>
    <option value="showAll">show all</option>
    <option value="yellow">yellow</option>
    </select>
</div>

<div class=grid>
    <label>violet
    <input type="checkbox" value="violet" />
    <span class="checkmark"></span>
    </label>
    <label>blue
    <input type="checkbox" value="blue" />
    <span class="checkmark"></span>
    </label>
    <label>yellow
    <input type="checkbox" value="yellow" />
    <span class="checkmark"></span>
    </label>
</div>

<div class=grid>
    <div class="filterDiv" data-category="violet blue" style="background-color: blue"></div>
    <div class="filterDiv" data-category="violet red" style="background-color: red"></div>
    <div class="filterDiv" data-category="yellow" style="background-color: yellow"></div>
</div>

标签： javascripthtmljquery

Answer 1

您希望菜单与复选框相同，因此您不需要<option value="showAll">show all</option>

简单地说，您可以获得所有selected选项并做类似的事情filterFunc

这是工作示例：

 var $filterCheckboxes = $('input[type="checkbox"]');
        var $filtermenues = $('.grid1');

        filterfuncAnother = function () {
            var selectedFilters = [];

            $filtermenues.find(":selected").each(function () {
                debugger
                var v = this.value;
                if (selectedFilters.indexOf(v) === -1 && v)
                    selectedFilters.push(v);
            });

            $('.animal' && '.filterDiv')
                .hide()
                .filter(
                    function (_, a) {
                        var itemCat = $(a).data('category').split(' ');
                        if (itemCat.indexOf("showAll") > -1)
                            return;
                        return selectedFilters.every(
                            function (c) {
                                return itemCat.indexOf(c) > -1;
                            })
                    })
                .show();
        }

        var filterFunc = function () {

            var selectedFilters = [];
            debugger
            $filterCheckboxes.filter(':checked').each(function () {
                var v = this.value;
                if (selectedFilters.indexOf(v) === -1)
                    selectedFilters.push(v);
            });

            $('.animal' && '.filterDiv')
                .hide()
                .filter(
                    function (_, a) {
                        var itemCat = $(a).data('category').split(' ');
                        return selectedFilters.every(
                            function (c) {
                                return itemCat.indexOf(c) > -1;
                            })
                    })
                .show();

        }

        $filterCheckboxes.on('change', filterFunc);

        $('select').on('change', filterfuncAnother);

body {
width: 100%;
text-align: center;
background-color: black;
color: white;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
}

<!-- Help needed in this URL: https://stackoverflow.com/q/68315184/4383420 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class=grid1>
        <select>
            <option value="">--</option>
            <!--<option value="showAll">show all</option>-->
            <option value="violet">violet</option>
        </select>
        <select>
            <option value="">--</option>
            <!--<option value="showAll">show all</option>-->
            <option value="blue">blue</option>
        </select>
        <select>
            <option value="">--</option>
            <!--<option value="showAll">show all</option>-->
            <option value="yellow">yellow</option>
        </select>
    </div>

<div class=grid>
    <label>violet
    <input type="checkbox" value="violet" />
    <span class="checkmark"></span>
    </label>
    <label>blue
    <input type="checkbox" value="blue" />
    <span class="checkmark"></span>
    </label>
    <label>yellow
    <input type="checkbox" value="yellow" />
    <span class="checkmark"></span>
    </label>
</div>

<div class=grid>
    <div class="filterDiv" data-category="violet blue" style="background-color: blue"></div>
    <div class="filterDiv" data-category="violet red" style="background-color: red"></div>
    <div class="filterDiv" data-category="yellow" style="background-color: yellow"></div>
</div>