The state does not reappear if I select another country

Question

The state field should be a hidden if I select country Mauritius, which works. The problem is that after choosing Mauritius, if I choose another country, the state field does not reappear.

<input id="state" name="state" type="text" placeholder="Amsterdam"
       style="visibility:visible" onfocus="con()">
<label for="country" id="country">Country</label>
            <select name="country">
                <option value=""></option>
                <option value="AF">Afghanistan</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="MU">Mauritius</option>
                                    your country</select>

function con() {
    var z=document.forms["task2"]["country"].value;
    var z11 = document.getElementById("male");
    var z12 = document.getElementById("state");

    if(z=="MU")
    {
        document.getElementById('state').style.visibility = 'hidden';
        z11.focus();
        return false;
    } else if(z!="MU") {
    z12.focus();
    document.getElementById('state').style.visibility='visible';
    z12.focus();
    }
}

Answer 1

http://jsfiddle.net/Maslow/pXMdL/

It needs to be onchange and there were other errors, like not listening to the select change. which is probably where your listener should have been in general. Also your sample didn't include the html for the form.

"your country" was outside of any valid elements (inside <select> but not inside an <option></option> tag.