title: How can I show/hide options in a select when another option is selected
body: <p>I'm trying to make an Unnoficial character creation tester for the popular game Mount &amp; Blade. The script should in theory, depending on the options chosen, determine the characters stats as it would do in game.</p>
  
  <p>At the moment when I choose male/female in the select box none of the specified fields disappear. What have I done wrong?</p>
  
  <p>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?</p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>//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;
      }
  }
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code> &lt;legend&gt;Choose your background:&lt;/legend&gt;
       &lt;label&gt;Gender&lt;/label&gt;
       &lt;select id="selGender"&gt; 
        &lt;option value="1" &gt;Male&lt;/option&gt;
        &lt;option value="2"&gt;Female&lt;/option&gt;
       &lt;/select&gt;
       &lt;label&gt;Your father was ...&lt;/label&gt;
       &lt;select id="selFather"&gt;
       &lt;option id="fnoble" value="fnoble"&gt;a Noble&lt;/option&gt;
       &lt;option id="mnoble" value="mnoble"&gt;a Noble&lt;/option&gt;
       &lt;option value="merchant"&gt;a Merchant&lt;/option&gt;
       &lt;option value="vetwarrior"&gt;a Veteran Warrior&lt;/option&gt;
       &lt;option value="thief"&gt;a Thief&lt;/option&gt;
       &lt;option id="fnomad" value="fnomad"&gt;a Nomad&lt;/option&gt;
       &lt;option id="mnomad" value="mnomad"&gt;a Nomad&lt;/option&gt;
       &lt;/select&gt;
  </code></pre>
  
  <p>EDIT: Also, I've made sure I've linked to the jQuery file in the header.</p>
  
  <pre><code>  &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>EDIT2: this is the section where mSquire and fSquire are:</p>
  
  <pre><code> &lt;label&gt;When you grew to a young adult, you became a ...&lt;/label&gt;
       &lt;select id="selAdult"&gt;
       &lt;option id="msquire" value="msquire"&gt;a Squire&lt;/option&gt;
       &lt;option id="fsquire" value="fsquire"&gt;a Lady in waiting&lt;/option&gt;
       &lt;option value="troubadour"&gt;Troubadour&lt;/option&gt;
       &lt;option value="student"&gt;Student&lt;/option&gt;
       &lt;option value="peddle"&gt;Peddler&lt;/option&gt;
       &lt;option value="poacher"&gt;Poacher&lt;/option&gt;
       &lt;/select&gt;
  </code></pre>