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

Frontend developer JavaScript
1

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

2

С помощью 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;

}