0

Подскажите, как на Javascript написать вывод именно того блока, id которого совпадает с data-value выбранного элемента выпадающего списка? При том, чтобы при загрузке показывался дефолтный блок (block1 с классом def), а при выборе из списка он скрывался. Или как это можно реализовать не через select? Пока запись data-value идет в input.

https://codepen.io/lsdreamerz/pen/jOwVoVR

if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function(callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}


const dropDownBtn = document.querySelector('.dropdown__button');
const dropdownList = document.querySelector('.dropdown__list');
const dropdownListItems = dropdownList.querySelectorAll('.dropdown__list-item');
const dropdownInput = document.querySelector('.dropdown__input-hidden');


dropDownBtn.addEventListener('click', function() {
  dropdownList.classList.toggle('dropdown__list--visible');
  this.classList.add('.dropdown__button--active')
});

dropdownListItems.forEach(function(listItem) {
  listItem.addEventListener('click', function(e) {
    e.stopPropagation();
    dropDownBtn.innerText = this.innerText;
    dropDownBtn.focus();
    dropdownInput.value = this.dataset.value;
    dropdownList.classList.remove('dropdown__list--visible');

  })
})



document.addEventListener('click', function(e) {
  if (e.target !== dropDownBtn) {
    dropdownList.classList.remove('dropdown__list--visible');
    dropDownBtn.classList.remove('.dropdown__button--active')

  }
})

document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab' || e.key === 'Escape') {
    dropdownList.classList.remove('dropdown__list--visible');
    dropDownBtn.classList.remove('.dropdown__button--active')
  }

})
.dropdown__button {
  position: relative;
  display: block;
  margin-top: 0.5em;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 24px 85px 24px 40px;
  width: 44%;
  margin: 0 auto;
  border: 6px solid #A941E5;
  border-radius: 211px;
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.25);
  background: transparent;
  cursor: pointer;
}

.dropdown__button:focus,
.dropdown__button--active {
  outline: none;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.45);
}

.dropdown__button::after {
  content: "";
  position: absolute;
  top: 38%;
  right: 35px;
  transform: translate(-50%);
  width: 0;
  height: 0;
  border-width: 25px 14px 0 14px;
  border-color: #A941E5 transparent transparent transparent;
  border-style: solid;
  pointer-events: none;
}

.dropdown__list {
  position: absolute;
  display: none;
  left: 28%;
  top: 95px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  list-style-type: none;
  background: #ffffff;
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1;
  border-radius: 12px;
  width: 44%;
}

.dropdown__list-item {
  margin: 0;
  padding: 10px 85px 10px 40px;
  border: 3px solid #A941E5;
  border-bottom: 0;
  cursor: pointer;
}

.dropdown__list-item:first-child {
  border-radius: 12px 12px 0 0;
}

.dropdown__list-item:last-child {
  border-radius: 0 0 12px 12px;
  border-bottom: 3px solid #A941E5;
}

.dropdown__list-item:hover {
  background: #e3d3ec;
}

.dropdown__list--visible {
  display: block;
}

.dropdown__input-hidden {
  /*display: none;*/
}

.output {
  margin: 0 auto;
  padding: 0px 8em 2em;
}

.program {
  padding-top: 20px;
  display: none;
}

.def {
  padding-top: 20px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="dropdown__button">Choise 1</button>
  <ul id="ddl" class="dropdown__list">
    <li class="dropdown__list-item" data-value="program1">Choise 1</li>
    <li class="dropdown__list-item" data-value="program2">Choise 2</li>
    <li class="dropdown__list-item" data-value="program3">Choise 3</li>
    <li class="dropdown__list-item" data-value="program4">Choise 4</li>
    <li class="dropdown__list-item" data-value="program5">Choise 5</li>
    <li class="dropdown__list-item" data-value="program6">Choise 6</li>
    <li class="dropdown__list-item" data-value="program7">Choise 7</li>
  </ul>
  <input type="text" name="select__group" value="" class="dropdown__input-hidden">
  <div class="output">
  </div>
  <div id="program1" class="program def">
    <h5> BLOCK1</h5>
  </div>
  <div id="program2" class="program">
    <h5> BLOCK2</h5>
  </div>
  <div id="program3" class="program">
    <h5> BLOCK3</h5>
  </div>
  <div id="program4" class="program">
    <h5> BLOCK4</h5>
  </div>
  <div id="program5" class="program">
    <h5> BLOCK5</h5>
  </div>
  <div id="program6" class="program">
    <h5> BLOCK6</h5>
  </div>
  <div id="program7" class="program">
    <h5> BLOCK7</h5>
  </div>
</body>

</html>

1
  • "Choise" -> "Choice"
    – user176262
    7 сен 2021 в 14:52

1 ответ 1

0

Вот так может:

    const programslist = document.querySelectorAll('.program');
    programslist.forEach(function(z) {
        if (z.id == dropdownInput.value) {
            z.classList.add('programs--visible');
        }
        else {
            z.classList.remove('programs--visible'); 
        }
    })
1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 8 сен 2021 в 7:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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