0

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

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

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

|-选择拼写-|

假设用户选择火作为他的咒语。现在页面看起来像这样：

|火|

|-选择拼写形式-|

并且上述下拉列表的选项是

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

仅当用户选择火时，我如何才能使特定的 Select Form of Spell 下拉菜单出现？（如果他们选择水，它会显示另一种自定义形式的法术，与地球、空气等相同），使用 KnockOut？

谢谢，如果这以任何方式令人困惑，我们深表歉意。如果您有任何问题，请发表评论

如果 JSFiddle 起作用了，我还有以下 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代码：

$(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');
});
4

0 回答 0