我怎样才能显示一个选择/隐藏选项时，另一个选项被选中

Question

我试图让流行的游戏坐骑&刀片的Unnoficial角色创建测试仪。脚本理论上应根据选择的选项确定角色统计数据，就像它在游戏中所做的一样。

当我在选择框中选择男性/女性时，没有任何指定的字段消失。我做错了什么？

当统计信息发生变化时，我想自动以表格形式显示它们，是否需要我为每个td提供一个id，或者我可以以某种方式引用哪个单元格，就像左边两个单元格中的第三个单元格一样是table1（3,2）还是太难/不可能？

这里是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; 
    } 
} 

下面是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> 

编辑：另外，我确信我已经挂在头jQuery的文件。

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

EDIT2：这就是mSquire和fSquire是部分：

<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

见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> 

...默认选择的值是 “男” ，所以如果你选择它，它不会触发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/