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

Question

So I have a list of cars, each car comes from a certain country. Each item has a div with a class of that certain country.

How can I make it show and hide based on the selection like

All Country1 Country2

So if I select country1 I only want to see country 1 and if I select all I want to see all countries

I have it working for 1 country, but when I press all nothing happens.. or when there is no div of the country then also nothing happens!

<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

You should add all class to every item. Basically, when you select all , you are doing this:

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';
    }            
}

You should post the divs code too to understand better the situation.

EDIT:

In addition to what I wrote if you want to hide all element your display function should be something like:

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';
}    

Not tested but should work.