Как обновлять данные в блоке в зависимости от селекта?

Question

[Марк]

Доброго дня.
У меня есть два селекта.

<select id="s1">
        <option value="vol1">1</option>
        <option value="vol2">2</option>
        </select>
<select id="s2">
        <option value="vol11">11</option>
        <option value="vol22">22</option>
        </select>
<h3 id="output"></h3>

Пытаюсь сделать так, чтобы в поле с id=output писался текст в зависимости от того, какие опции выбраны в селектах s1 и s2.
Значения я получил, но не понимаю как ими оперировать и как правильно обновлять данные без перезагрузки страницы.

let sel1 = $('#s1').val();
 let sel2 = $('#s2').val();

Answer 1

[Никита Колесников]

Прогонять sel1 и sel2 через if`ы, и в зависимости от результата менять output

Через js меняется так (без перезагрузки):

document.getElementById('output').innerHtml = newContent;

Answer 2

[Absolute138]

Здесь вариантов много.

// getElementById s1
document.getElementById('s1').onchange = function(){
  document.getElementById('output').textContent = this.value;
};

// querySelector s2
document.querySelector('#s2').onchange = function(){
  document.querySelector('#output').textContent = this.value;
};

//jQuery для обоих select'ов
$('select[id^="s"]').on('change', function(){
  $('#output').text(this.value);
});