Change the value of a select box (html) from javascript

Change the value of a select box (html) from javascript

I have a select box in my webpage to fill a formulary. I want to recover
the info filled by the user other times in it exists.
All my fields are properly filled except select box.
This is my code in html related to selectbox:
<br>Gender: <select id="gender">
<option value="man">Man</option>
<option value="woman">Woman</option><br>
It is a simple webpage just with a formulary in it. There is not anything
else. I am just trying it.
With this line:
$(document).on("pageinit", '#settings', function() {
document.forms[0].gender.value = userGender;
...
I am modifiying the value of that box for reading it in other parts of my
webpage or send it to the database. And the value keept is the correct
one, but, the displayed value is not propertly shown.
Do you know which property do I have to modify to change the displayed value?