我怎樣才能顯示一個選擇/隱藏選項時，另一個選項被選中

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/