Newbie troubleshooting question

Newbie troubleshooting question

I am pretty new to jQuery but very excited to learn. What I am trying to accomplish is a series of dropdown menus. The first dropdown menu selection will determine which menu populates next and so on. After the fourth dropdown selection, I would like it to generate a single word. Basically it is a sizing calculator.

The first problem I am having is that with this code (clearly something wrong) when I select "Mens", it shows the womens and vice versa.

Also, I am having trouble figuring out how to display a line of text following a selection.



    <script>
        $(document).ready(function (){
            $("#gender").change(function() {
                if ($(this).val() !== "mens") {
                    $("#mbootsize").show();
                }else{
                    $("#mbootsize").hide();
                } 
            });

        $(document).ready(function (){
            $("#gender").change(function() {
                if ($(this).val() !== "womens") {
                    $("#wbootsize").show();
                }else{
                    $("#wbootsize").hide();
                } 
            });

    <a>
        <select id="gender" name="state" style="width: 212px;">
        <label for="gender">Gender</label>
            <option value="select">Select One</option> 
            <option value="mens">Mens</option>
            <option value="womens">Womens</option>
        </select>
    </a>

    <a id="mbootsize" style="display:none;">
        <label for="mbootsie">Boot Size </label>
        <select id=""width: 212px;>
        <option value="8">8</option>
        <option value="8.5">8.5</option>
        <option value="9">9</option>
        <option value="9.5">9.5</option>
        <option value="10">10</option>
        <option value="10.5">10.5</option>
        <option value="11">11</option>
        <option value="11.5">11.5</option>
        <option value="12">12</option>
        <option value="12.5">12.5</option>
        <option value="13">13</option>
        <option value="13.5">13.5</option>
        <option value="14">14</option>
        </select>
    </a>

    <a id="wbootsize" style="display:none;">
        <label for="wbootsie">Boot Size </label>
        <select id=""width: 212px;>
        <option value="6">6</option>
        <option value="6.5">6.5</option>
        <option value="7">7</option>
        <option value="7.5">7.5</option>
        <option value="8">8</option>
        <option value="8.5">8.5</option>
        <option value="9">9</option>
        <option value="9.5">9.5</option>
        <option value="10">10</option>
        </select>
    </a>