'selected' attribute for options doesn't reset inside if else statement

I am trying to use an if else statement to add 'selected' to an option from the select menu. The only problem I have is that I'm not sure why once I go back to value 'top' option[1] is still 'selected'. It's like the first if doesn't execute the condition, although i see if i do the console log it does change to the first if...

<select id='selectdesign'>
    <option value="0"></option>
    <option value="top">top</option>
    <option value="jeans">jeans</option>
</select>


<select id='selectmenu'>
    <option value="0"></option>
    <option value="1">top-blue</option>
    <option value="2">top-pink</option>
    <option value="3">bottoms-red</option>
    <option value="4">bottoms-violet</option>
</select>
function selectOption(element) {
        if (element.value == 'top') {
             console.log('if');
             option[2].setAttribute('selected', true);
        } else if (element.value == 'jeans') {
             console.log('else if');
             option[1].setAttribute('selected', true);  
        }
    }

i am calling the selectOption function on selectDesign on change