Question

所以我有一份汽车清单，每辆汽车都来自某个国家。每个项目都有一个div，其中包含某个国家/地区的类别。

如何根据

等选项进行显示和隐藏

所有国家1 COUNTRY2

因此，如果我选择country1，我只想看到国家1，如果我选择所有我希望查看所有国家/地区

我让它在一个国家工作，但是当我按下所有没有任何事情发生时......或者当没有国家的div时，那么也没有任何事情发生！

<script>

    function selectCountry() {
        var country = document.getElementById("countryList");
        display(country);
    }

    function display(value) {
        var country = value;
        var list = document.getElementsByClassName(country);

        for (var i = 0; i < list.length; i++) {
            list[i].style.display = 'block';
        }            
    }

</script>

<form>
    Select country:
    <select id="countryList" onchange="selectCountry()">
        <option value="all">All</option>
        <?php foreach ($countries as $country) {
            echo "<option value=" . $country. ">" . $country . "</option>";
        } ?>        
    </select>
</form>

Answer 1

您应该为每个项目添加all课程。基本上，当您选择all时，您正在执行此操作：

function display(value) {
    //VALUE == "all"
    var country = value;
    //GET EVERY ELEMENT WITH "all" CLASS
    var list = document.getElementsByClassName(country);

    //IN YOUR CASE "list.length == 0" SO NO HIGHLIGHT
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'block';
    }            
}

您也应该发布div代码以更好地了解情况。

修改

除了我要写的内容，如果你想要隐藏所有元素，你的display函数应该是这样的：

var allItems = document.getElementsByClassName("all"); for (var i = 0; i < allItems.length; i++) { allItems[i].style.display = 'none'; } var list = document.getElementsByClassName(country); for (var i = 0; i < list.length; i++) { list[i].style.display = 'block'; }

未经测试但应该有效。

基于选项选择的Javascript显示/隐藏

1 个答案: