How can I show/hide options in a select when another option is selected

Question

I'm trying to make an Unnoficial character creation tester for the popular game Mount & Blade. The script should in theory, depending on the options chosen, determine the characters stats as it would do in game.

At the moment when I choose male/female in the select box none of the specified fields disappear. What have I done wrong?

When the stats are changed I want to automatically display them in a tabular form, would that require me to give an id to each td or could I somehow reference which cell so like the third cell from the left two cells down would be table1(3,2) or is that too difficult/impossible?

Here is the Javascript:

// Base Stats - 
var sGender; // Male or Female
var iAgi = 6;
var iStr = 5;
var iInt = 5;
var iCha = 5;

$("#selGender").change(function() {
    var mnf = $(this).val();
    sGender = parseInt(mnf);
    if (sGender = 1){
        // Show/hide options
        $('#fnomad').hide();
        $('#fnoble').hide();
        $('#fsquire').hide();
        $('#mnomad').show();
        $('#mnoble').show();
        $('#msquire').show();
        iAgi++;
        iInt++;
        this.disabled=true;
    } else {
        $('#mnomad').hide();
        $('#mnoble').hide();
        $('#msquire').hide();
        $('#fnomad').show();
        $('#fnoble').show();
        $('#fsquire').show();
        iStr++;
        iCha++;
        this.disabled=true;
    }
}

Here is the HTML

<legend>Choose your background:</legend>
<label>Gender</label>
<select id="selGender"> 
    <option value="1" >Male</option>
    <option value="2">Female</option>
</select>
<label>Your father was ...</label>
<select id="selFather">
    <option id="fnoble" value="fnoble">a Noble</option>
    <option id="mnoble" value="mnoble">a Noble</option>
    <option value="merchant">a Merchant</option>
    <option value="vetwarrior">a Veteran Warrior</option>
    <option value="thief">a Thief</option>
    <option id="fnomad" value="fnomad">a Nomad</option>
    <option id="mnomad" value="mnomad">a Nomad</option>
</select>

EDIT: Also, I've made sure I've linked to the jQuery file in the header.

  <script type="text/javascript" src="jquery.min.js"></script>

EDIT2: this is the section where mSquire and fSquire are:

<label>When you grew to a young adult, you became a ...</label>
<select id="selAdult">
    <option id="msquire" value="msquire">a Squire</option>
    <option id="fsquire" value="fsquire">a Lady in waiting</option>
    <option value="troubadour">Troubadour</option>
    <option value="student">Student</option>
    <option value="peddle">Peddler</option>
    <option value="poacher">Poacher</option>
</select>

Answer 1

See http://jsfiddle.net/KvNVN/

Instead of showing/hiding each element, you can add classes to them:

<select id="selFather">
    <option id="fnoble" value="fnoble" class="f">a Noble (f)</option>
    <option id="mnoble" value="mnoble" class="m">a Noble (m)</option>
    <option value="merchant">a Merchant</option>
    <option value="vetwarrior">a Veteran Warrior</option>
    <option value="thief">a Thief</option>
    <option id="fnomad" value="fnomad" class="f">a Nomad (f)</option>
    <option id="mnomad" value="mnomad" class="m">a Nomad (m)</option>
</select>

And then

$('.f').hide();
$('.m').show();

You could also create a CSS stylesheet with: .f{display:none} .m{display:block;}

Your code has a problem: if you have ...

<select id="selGender">
    <option value="1" >Male</option>
    <option value="2">Female</option>
</select>

... the default selected value is "Male", so if you select it it doesn't trigger onchange event. You can use

<select id="selGender">
    <option selected="selected" disabled="disabled">Select gender:</option>
    <option value="1" >Male</option>
    <option value="2">Female</option>
</select>

Moreover, you have

if (sGender = 1)

You should use

if (sGender == 1)

because you are comparing, not setting values.

About your other question (navigate through a table), you can create a JavaScript function which does that. But I don't understand very well what you want with "the third cell from the left two cells down".

Edit:

If I understand well you have a table like

<table id="table">
 <tbody>
   <tr>
     <td>Skill 1</td>
     <td>Skill 2</td>
     <td>Skill 3</td>
   </tr>
   <tr>
     <td>Value 1</td>
     <td>Value 2</td>
     <td>Value 3</td>
   </tr>
 </tbody>
</table>

And you want

table(1,1)=Skill 1 cell
table(1,2)=Value 1 cell

table(2,1)=Skill 2 cell
table(2,2)=Value 2 cell

...

Then,

function table(col,row){
   return document.getElementById('table').tBodies[0].getElementsByTagName('tr')[row-1].getElementsByTagName('td')[col-1];
}

See it here: http://jsfiddle.net/UGHHd/