位置绝对和溢出隐藏(Position absolute and overflow hidden)

 见http://jsfiddle.net/KvNVN/ 
 
 您可以向它们添加类，而不是显示/隐藏每个元素： 
 
<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>
 
 接着 
 
$('.f').hide();
$('.m').show();
 
 您还可以创建一个CSS样式表： .f{display:none} .m{display:block;} 
 
 你的代码有问题：如果你有...... 
 
<select id="selGender">
    <option value="1" >Male</option>
    <option value="2">Female</option>
</select>
 
 ...默认选中的值为“Male”，因此如果选择它，则不会触发onchange事件。 您可以使用 
 
<select id="selGender">
    <option selected="selected" disabled="disabled">Select gender:</option>
    <option value="1" >Male</option>
    <option value="2">Female</option>
</select>
 
 而且，你有 
 
if (sGender = 1)
 
 你应该用 
 
if (sGender == 1)
 
 因为你正在比较，而不是设定值。 
 
 关于您的另一个问题（在表格中导航），您可以创建一个JavaScript函数来执行该操作。 但是我不太清楚你想要什么，“左边两个细胞中的第三个细胞”。 
 
 编辑： 
 
 如果我理解得很好你有一张像这样的桌子 
 
<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>
 
 
 你想要的 
 
table(1,1)=Skill 1 cell
table(1,2)=Value 1 cell

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

...
 
 然后， 
 
function table(col,row){
   return document.getElementById('table').tBodies[0].getElementsByTagName('tr')[row-1].getElementsByTagName('td')[col-1];
}
 
 在这里看到： http ： //jsfiddle.net/UGHHd/ 

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/