Условие в выпадающих списках

Хочу сделать ряд выпадающих списков, но суть в том что они должны быть взаимосвязанны, в первом например, мы выбираем направление: Техническое и во втором соответственно подбирается список из технических профессий, например Программист, Инженер, и тд. Я не понимаю как можно задать такие условия

С помощью js конечно

<select id="first">
<option
value="Один">Техническая
<option
value="Два">Гуманитарная
<option
value="Три">Общественная


<select
id="second">
<option
value="Один">Один
<option
value="Два">Два
<option
value="Три">Три

const first = document.getElementById('first');
const
second = document.getElementById('second');
const
options = {
'Один': ['Программист', 'Электрик', 'Инжинер'],
'Два': ['Юрист', 'Адвокат'],
'Три': ['Пожарник', 'Полицейский', 'Медик']
}
;

first.addEventListener('change', function(e) {
// Get current value from first select
let val = this.value;
// Clear second select
second.innerHTML = '';
// Get options by current value
for (var i = options[val].length - 1; i >= 0; i--) {
// Create new option
let option = createOption(options[val][i], options[val][i]);
// Append option to the second select
second.appendChild(option);
}
})
;


/* Fucntion to craete option */
function createOption(text, value) {
const option = document.createElement('option');
option.innerText = text;
option.value = value;
return
option;
}