Hide/show dropdown based on selected value

Question

I'm having a bit of trouble with a dynamic dropdown list.

I would like to show the optionTwo dropdown item only when the value of optionOne dropdown item is 'Yes'.

<div class="smartcapture-controls">
        <div class="sc-formfield-label"><label for="Dual_Nationality">Do you have dual nationality?</label></div>
        <div class="sc-formfield-input">
            <select name="Dual_Nationality" id="optionOne" data-field-type="Text" required="required"
                data-validation-message="Please fill out this field." onchange="showHideInput(this)">
                <option value="1" id="Yes" selected="selected">Yes</option>

                <option value="No" id="No">No</option>

            </select>
        </div>
    </div>

    <div class="smartcapture-controls" id="optionTwo">
        <div class="sc-formfield-label"><label for="Second_Nationality">Second_Nationality</label></div>
        <div class="sc-formfield-input">
            <select name="Second_Nationality" id="" data-field-type="Text" required="required"
                data-validation-message="Please fill out this field.">
                <option value="" id="Yes" selected="selected">Yes</option>

                <option value="No" id="No">No</option>

            </select>
        </div>
    </div>

Javascript

function showHideOther1() {
            var selection1 = document.getElementById("optionOne");
            var selection2 = document.getElementById("optionTwo");

            if (selection1.selected == true){
            selection2.style.display = "block";
            text.required = true;
            } else {
            text.style.display = "none";
            text.required = false; 
            }  
            }

Answer 1

Add a .hidden class that you can remove or add based on selection1.options[selection1.selectedIndex].text

And call the function on document load to apply the logic based on the default selected value

function showHideOther() {

    const selection1 = document.getElementById("optionOne");
    const selection2 = document.getElementById("optionTwo");
    
    if (selection1.options[selection1.selectedIndex].text === 'Yes'){
        selection2.classList.remove('hidden');
    } else {
        selection2.classList.add('hidden');
    }  
}

showHideOther()

.hidden {
    display: none;
}

<div class="smartcapture-controls">
        <div class="sc-formfield-label"><label for="Dual_Nationality">Do you have dual nationality?</label></div>
        <div class="sc-formfield-input">
            <select name="Dual_Nationality" id="optionOne" data-field-type="Text" required="required"
                data-validation-message="Please fill out this field." onchange="showHideOther()">
                <option value="1" id="Yes" selected="selected">Yes</option>

                <option value="No" id="No">No</option>

            </select>
        </div>
    </div>

    <div class="smartcapture-controls hidden" id="optionTwo">
        <div class="sc-formfield-label"><label for="Second_Nationality">Second_Nationality</label></div>
        <div class="sc-formfield-input">
            <select name="Second_Nationality" id="" data-field-type="Text" required="required"
                data-validation-message="Please fill out this field.">
                <option value="" id="Yes" selected="selected">Yes</option>

                <option value="No" id="No">No</option>

            </select>
        </div>
    </div>