Javascript 了解如何限制窗体的哪个部分可见

在一个游戏论坛上，有人请求一种“生成”咒语的方法。这可能让你感到困惑，但这就是为什么他们需要“生成”一个咒语。此游戏（Topia Online）中的所有法术必须由用户编码。（或从其他用户处购买）。所以任何不擅长编码的人都不会有好的自定义法术。我在这里做了一个简单的应用

它接受用户输入的咒语类型（火、水等），然后显示该类型特有的咒语形式。在一次IRC聊天中（游戏开发者）告诉我，为了使我的代码更小，可以使用Knockout。我没有使用过knockout，我想知道这里是否有人可以给我一个示例/链接，说明当用户在上一个下拉列表中选择特定选项时，如何使自定义下拉列表显示。例如：

这是页面上显示的唯一下拉列表：

|-选择咒语-|

假设用户选择火作为他的法术。现在，该页面如下所示：

|火|

|-选择拼写形式-|

以上下拉列表的选项如下

|火弹-第1层| |火球-第2层| |防火墙-第3层|

我如何使特定的选择形式的法术下拉列表只在用户选择开火时出现？（如果他们选择水，它将显示另一种自定义的法术形式，与地球、空气等相同），使用击倒

谢谢，如果这让人困惑，我很抱歉。如果您有任何问题，请发表评论

如果JSFIDLE出现问题，我还有以下HTML代码：

<select size="1" id="Spell" title="" name="Spell">
<option value="">-Select Your Spell Type-</option>
<option value="fire">Fire</option>
<option value="lightning">Lightning</option>
<option value="plasma">Plasma</option>
<option value="water">Water</option>
<option value="earth">Earth</option>
<option value="air">Air</option>
</select>
<div class="container">
<div class="fire">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="fireForm1">Fire Bullet - Tier 1</option>
        <option value="fireForm2">Fire Ball - Tier 2</option>
        <option value="fireForm3">Fire Wall - Tier 3</option>
    </select>
</div>
<div class="lightning">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="lightningForm1">Electrified Bullet - Tier 1</option>
        <option value="lightningForm2">Smite - Tier 2</option>
        <option value="lightningForm3">Electrified Rain - Tier 3</option>
    </select>
</div>
<div class="plasma">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="plasmaForm1">Plasma Bullet - Tier 1</option>
        <option value="plasmaForm2">Ball o' Plasma - Tier 2</option>
        <option value="plasmaForm3">Wall of Plasma - Tier 3</option>
    </select>
</div>
<div class="water">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="waterForm1">Water Shove - Tier 1</option>
        <option value="waterForm2">Water Fountain - Tier 2</option>
        <option value="waterForm3">Tsunami - Tier 3</option>
    </select>
</div>
<div class="earth">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="earthForm1">Rock Bullet - Tier 1</option>
        <option value="earthForm2">Ball of Rock - Tier 2</option>
        <option value="earthForm3">Avalanche - Tier 3</option>
    </select>
</div>
<div class="air">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="airForm1">Air Blast - Tier 1</option>
        <option value="airForm2">Levitate - Tier 2</option>
        <option value="airForm3">Funnel Cloud - Tier 3</option>
    </select>
</div>
</div>
    <div class="second-level-container">
<div class="fireForm1">Code will be here for Fire Bullet</div>
<div class="fireForm2">Code will be here for Fire Ball</div>
<div class="fireForm3">Code will be here for Fire Wall</div>
<div class="lightningForm1">Code will be here for Electrified Bullet</div>
<div class="lightningForm2">Code will be here for Smite</div>
<div class="lightningForm3">Code will be here for Electrified Rain</div>
<div class="plasmaForm1">Code will be here for Plasma Bullet</div>
<div class="plasmaForm2">Code will be here for Ball o' Plasma</div>
<div class="plasmaForm3">Code will be here for Plasma Wall</div>
<div class="waterForm1">Code will be here for Water Shove</div>
<div class="waterForm2">Code will be here for Water Fountain</div>
<div class="waterForm3">Code will be here for Tsunami</div>
<div class="earthForm1">Code will be here for Rock Bullet</div>
<div class="earthForm2">Code will be here for Ball of Rock</div>
<div class="earthForm3">Code will be here for Avalanche</div>
<div class="airForm1">Code will be here for Air Blast</div>
<div class="airForm2">Code will be here for Levitate</div>
<div class="airForm3">Code will be here for Funnel Cloud</div>

---

js有一个很好的互动教程可以开始：-你应该先这样做来理解这个概念，然后阅读可视绑定的文档：@fab会这样做的，谢谢

$(document).ready(function () {
$('#Spell').bind('change', function () {
    var elements = $('div.container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');
});