document.getElementsByClassName("form-control")[0].addEventListener("change", function() { document.getElementsByTagName('img')[0].style.display = 'none'; document.getElementsByTagName('img')[2].style.display = 'none'; }) 
 <nav class='navbar navbar-default'> <div class='container'> <div class="navbar-header"> </div> </div> </nav> <div class="container"> <div class='col-xs-12 col-sm-6 col-sm-offset-3'> <div class='page-header'> <h1>вибери свою систему:</h1> <img src="tasks_assets/apple.jpg" alt="Apple"> <img src="tasks_assets/ubuntu.png" alt="Ubuntu"> <img src="tasks_assets/windows.jpg" alt="Windows"> </div> <div class='panel'> <div class='panel-body'> <form> <select class="form-control"> <option id="cio">Windows</option> <option id="cio1">Os X</option> <option id="cio2">Ubuntu</option> </select> <br> <p> <button class='btn btn-primary'>подтвердить</button> </p> </form> </div> </div> </div> </div>

    1 answer 1

     document.getElementsByClassName("form-control")[0].addEventListener("change", function(e) { document.querySelectorAll(".page-header > img").forEach(item => { if (item.getAttribute("alt") !== e.target.value) { item.style.display = "none"; } else { item.style.display = "block"; } }); }); 
     <nav class='navbar navbar-default'> <div class='container'> <div class="navbar-header"> </div> </div> </nav> <div class="container"> <div class='col-xs-12 col-sm-6 col-sm-offset-3'> <div class='page-header'> <h1>вибери свою систему:</h1> <img src="tasks_assets/apple.jpg" alt="Apple"> <img src="tasks_assets/ubuntu.png" alt="Ubuntu"> <img src="tasks_assets/windows.jpg" alt="Windows"> </div> <div class='panel'> <div class='panel-body'> <form> <select class="form-control"> <option value="Windows">Windows</option> <option value="Apple">Os X</option> <option value="Ubuntu">Ubuntu</option> </select> <br> <p> <button class='btn btn-primary'>подтвердить</button> </p> </form> </div> </div> </div> </div>