Как выбрать определенное значение нажатием на кнопку?

Автор вопроса: Quick Brown Fox

На сайте есть фильтр. В нем есть параметры, которые находятся внутри тега <select>.
Есть рядом боковое меню, внутри него несколько <button> со своими текстовым значением.

Как сделать, чтобы при нажатии на кнопку, текст внутри неё сравнивался со значениями <select> и тот, который совпадал, становился выбранным (selected).

.button-value {
  display: block;
}
.select-filter {
 margin-bottom: 40px;
}

<select class="select-filter">
   <option>Значение 1</option>
   <option>Значение 2</option>
   <option>Значение 3</option>
</select>

<button class="button-value">Значение 1</button>
<button class="button-value">Значение 2</button>
<button class="button-value">Значение 3</button>

Источник

Ответы (2 шт):

Автор решения: Leonid

Постановка вопроса не совсем верная. Нужно просто задать select.value это и будет по сути изменение значения selected. Если надо, чтобы сгенерировалось событие change для select нужно сделать это явно:

let select = document.querySelector('.select-filter');
document.querySelectorAll('.button-value').forEach(b => {
    b.addEventListener('click', e => {
         select.value = e.target.textContent;
         select.dispatchEvent(new Event('change')); // Вызываем событие change
    });
})

select.onchange = () => {
    console.log('changed', select.value);
}

.button-value {
  display: block;
}
.select-filter {
 margin-bottom: 40px;
}

<select class="select-filter">
   <option>Значение 1</option>
   <option>Значение 2</option>
   <option>Значение 3</option>
</select>

<button class="button-value">Значение 1</button>
<button class="button-value">Значение 2</button>
<button class="button-value">Значение 3</button>

→ Ссылка

Автор решения: Denis640Kb

    document.addEventListener('DOMContentLoaded', function () { // При загрузке документа
        let sel = document.querySelector('.select-filter'); // Получаем селект
        let buttons = document.querySelectorAll('.button-value'); // Получаем кнопки с классом
        buttons.forEach(function (c) { // Для каждой кнопки
            c.onclick = function () { // Слушаем нажатие
                sel.value = c.innerText; // Если нажата, то выбирает тот option, который в тексте кнопки.
            }
        })
    })

    .button-value {
        display: block;
    }
    .select-filter {
        margin-bottom: 40px;
    }

<select class="select-filter">
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
</select>

<button class="button-value">Значение 1</button>
<button class="button-value">Значение 2</button>
<button class="button-value">Значение 3</button>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.