1

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>

0

1 ответ 1

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.