How to prevent Java Script function from refreshing the page (on it's own) after execution

I am trying to create a function that takes the information from a dropdown list and according to the chosen option it shows an element after a successful submission of the form. The function works fine but after it is executed it automatically refreshes the page even though there is no command telling it to refresh causing the element to disappear in a blink of an eye after submission

I have tried to achieve the same thing using the switch statement but it results the same way which makes me think that something else may be causing it

<div id="container" align="center"><br />

<form action="#" method="POST">
<input type="text" class="fields" name="userid" placeholder="Enter user ID here" />
<select id="selectOptions" class="dropdown">
    <option value='name'>Name</option>
    <option value='username'>Username</option>
    <option value='password'>Password</option>
    <option value='email'>Email</option>
    <option value='privilege'>Privilege</option>
</select>
<button class="regbutton" onclick="openChange()">Submit</button>
</form>

<script>
function openChange(){
    var option = document.getElementById("selectOptions");
    var value = option[option.selectedIndex].value;

        if(value = "name"){
            document.getElementById("1").style.display = "initial";
        }
        else if(value = "username"){
            document.getElementById("2").style.display = "initial";
        }
        else if(value = "password"){
            document.getElementById("3").style.display = "initial";
        }
        else if(value = "email"){
            document.getElementById("4").style.display = "initial";
        }
        else if(value = "privilege"){
            document.getElementById("5").style.display = "initial";

        }
}
</script>
</div>

<label id="1" class="option"><input type="text" class="fields" placeholder="Enter new name" /></label>
<label id="2" class="option"><input type="text" class="fields" placeholder="Enter new username " /></label>
<label id="3" class="option"><input type="text" class="fields" placeholder="Enter new password" /></label>
<label id="4" class="option"><input type="text" class="fields" placeholder="Enter new email" /></label>

I expect this function to show the proper element according to the chosen option and then end but it actually refreshes the page after it executes it's primary function