@Vladduk

Как в зависимости от выбранного option'а добавлять различные кнопки?

Есть select, у которого два option, хочу чтобы при нажатии на один option добавлялись или появлялись две кнопки с определенными названиями, а при нажатии второго option первые кнопки пропадали и добавляли другие 6 кнопок со своими названиями. https://codepen.io/ilya1707/pen/rNdPVJp
  • Вопрос задан
  • 80 просмотров
Решения вопроса 2
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Создайте ниже отдельный элемент, и в него уже добавляйте ваши кнопки. так новые кнопки будут заменять старые.
Ответ написан
@DAGorbachev
Поступите проще.

Сделайте два скрытытх блока.
В одном - две кнопки.
Во втором - шесть кнопок.

По событию change принимайте значение option, скрывайте оба блока, и показывайте нужный.

<select id ="select">
        <option value="1">2 кнопки</option>
        <option value="2">5 кнопок</option>
    </select>
    <div id="btns-1" class="btns" style="display: none;">
        <button style="background-color: #bad;">lorem</button>
        <button style="background-color: #bad;">lorem</button>
    </div>
    <div id="btns-2" class="btns" style="display: none;">
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
    </div>


const select = document.querySelector('#select');
const handleSelectChange = e => {
    let btns = document.getElementsByClassName('btns');
    for (let index = 0; index < btns.length; index++) {
        btns[index].style.display = 'none';
    }
    let value = e.target.value;
    let current = document.getElementById('btns-'+value);
    current.style.display = 'block';
}
select.addEventListener('change', handleSelectChange);


Тольку лучше меняйте отображение не стилями классами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы