Показать/скрыть Javascript на основе опции

Question

Итак, у меня есть список автомобилей, каждый автомобиль прибывает из определенной страны. Каждый элемент имеет div с классом определенной страны.

Как я могу сделать это показать и скрыть на основе выбора как

Все стране1 COUNTRY2

Так что, если я выбираю стране1 я только хочу видеть страну 1, и если я выбираю все, что я хочу посмотреть все страны

У меня есть работа в 1 стране, но когда я нажимаю все, ничего не происходит .. или когда нет дивы из страны, тогда и ничего не происходит!

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

Вы должны размещать код дивы тоже лучше понять ситуацию.

EDIT:

В дополнение к тому, что я написал, если вы хотите скрыть все элементы вашей 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'; 
}  

Не тестировался, но должен работать.