Question

我正在尝试为热门游戏Mount＆amp; amp做一个非正式角色创建测试工具。刀。理论上，根据所选择的选项，脚本应该像在游戏中一样确定角色统计数据。

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

当统计数据发生变化时，我想以表格形式自动显示它们，这是否需要我给每个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>

...默认选中的值为“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/

当选择其他选项时，如何在选择中显示/隐藏选项

1 个答案: