다른 옵션을 선택했을 때 선택에서 옵션을 표시하거나 숨길 수있는 방법

Question

인기있는 게임 인 Mount & Blade에 대해 Unnoficial 문자 작성 테스터를 만들려고합니다. 스크립트는 이론적으로 선택한 옵션에 따라 캐릭터 통계를 게임에서와 같이 결정해야합니다.

선택 상자에서 남성/여성을 선택하는 순간 특정 필드가 사라집니다. 나는 무엇을 잘못 했는가?

통계가 바뀌면 자동으로 표 형식으로 표시하고 싶습니다. 각 표에 ID를 지정해야하거나 왼쪽 셀의 세 번째 셀과 같은 셀을 어떻게 든 참조 할 수 있습니까? table1 (3,2)이거나 너무 어렵거나 불가능한가요? 여기

는 자바 스크립트입니다 :

여기

//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 이벤트가 트리거되지 않습니다. 당신은 당신이 값을 설정하지, 비교하고 있기 때문에 당신은

if (sGender == 1) 

를 사용해야합니다

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

을 사용할 수 있습니다.

다른 질문 (테이블을 탐색)에 대한 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/