我正试图使用JQuery或Javascript来获得基于先前下拉选择的辅助下拉菜单选项。实际上，我的JQuery是基于我在这个网站上找到的其他一些代码，并在必要时进行了更改，但它仍然不起作用。我希望有人能指出我哪里错了。
HTML:
<html>
<meta charset="UTF-8" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="landing.css">
</head>
<header>
<h1>Character Creator</h1>
<script src="landing_2.js">
"use strict"
</script>
</header>
<body
<form class="wrapper1">
<label>Race</label>
<select id="race" name="race">
<option data='SHOW' value='0'>--Select--</option>
<option value="Aarakocra">Aarakocra</option>
<option value="Aasimar">Aasimar</option>
<option value="Bugbear">Bugbear</option>
<option value="Dragonborn">Dragonborn</option>
<option value="Dwarf">Dwarf</option>
<option value="Elf">Elf</option>
<option value="Firbolg">Firbolg</option>
<option value="Genasi">Genasi</option>
<option value="Gith">Gith</option>
<option value="Gnome">Gnome</option>
<option value="Goblin">Goblin</option>
<option value="Goliath">Goliath</option>
<option value="Half-Elf">Half-Elf</option>
<option value="Half-Orc">Half-Orc</option>
<option value="Halfling">Halfling</option>
<option value="Hobgoblin">Hobgoblin</option>
<option value="Human">Human</option>
<option value="Kenku">Kenku</option>
<option value="Kobold">Kobold</option>
<option value="Lizardfolk">Lizardfolk</option>
<option value="Orc">Orc</option>
<option value="Serpentblood">Serpentblood</option>
<option value="Tabaxi">Tabaxi</option>
<option value="Tiefling">Tiefling</option>
<option value="Triton">Triton</option>
<option value="Tortle">Tortle</option>
</select>
<br />
<label>Subrace</label>
<select id="subrace" name="subrace">
<option>Select</option>
</select>
<br />
<label>Class</label>
<select id="class">
<option value="Barbarian">Barbarian</option>
<option value="Bard">Bard</option>
<option value="Cleric">Cleric</option>
<option value="Druid">Druid</option>
<option value="Fighter">Fighter</option>
<option value="Monk">Monk</option>
<option value="Paladin">Paladin</option>
<option value="Ranger">Ranger</option>
<option value="Rogue">Rogue</option>
<option value="Sorcerer">Sorcerer</option>
<option value="Warlock">Warlock</option>
<option value="Wizard">Wizard</option>
</select>
<br />
<label>Background</label>
<select id="background">
<option value="Acolyte">Acolyte</option>
<option value="Barbarian Tribe Member">Barbarian Tribe Member</option>
<option value="Charlatan">Charlatan</option>
<option value="City Watch">City Watch</option>
<option value="Clan Crafter">Clan Crafter</option>
<option value="Cloistered Scholar">Cloistered Scholar</option>
<option value="Coutier">Courtier</option>
<option value="Criminal">Criminal</option>
<option value="Custom">Custom</option>
<option value="Entertainer">Entertainer</option>
<option value="Faction Agent">Faction Agent</option>
<option value="Far Traveler">Far Traveler</option>
<option value="Folk Hero">Folk Hero</option>
<option value="Guild Artisan">Guild Artisan</option>
<option value="Haunted One">Haunted One</option>
<option value="Hermit">Hermit</option>
<option value="Inheritor">Inheritor</option>
<option value="Knight">Knight</option>
<option value="Mercenary Veteran">Mercenary Veteran</option>
<option value="Noble">Noble</option>
<option value="Outlander">Outlander</option>
<option value="Port City Noble">Port City Noble</option>
<option value="Sage">Sage</option>
<option value="Sailor">Sailor</option>
<option value="Soldier">Soldier</option>
<option value="Urban Bounty Hunter">Urban Bounty Hunter</option>
<option value="Urchin">Urchin</option>
</select>
<br />
<br />
<label>Alignment</label>
<select id="alignment">
<option value="LG">Lawful Good</option>
<option value="LG">Neutral Good</option>
<option value="LG">Chaotic Good</option>
<option value="LG">Lawful Neutral</option>
<option value="LG">True Neutral</option>
<option value="LG">Chaotic Neutral</option>
<option value="LG">Lawful Evil</option>
<option value="LG">Neutral Evil</option>
<option value="LG">Chaotic Evil</option>
</select>
<div class="racedes">
<input type="text" id="racedes" value="Race Description">
</div>
<div class="classdes">
<input type="text" id="classdes" value="Class Description">
</div>
<div class="backdes">
<input type="text" id="backdes" value="Background Description">
</div>
<div class="aligndes">
<input type="text" id="aligndes" value="Alignment Description">
</div>
</form>
<div class="img">
<img src="aarakocra_barbarian.png" alt="Aarakocra Barbarian" >
<img src="aarakocra_bard.png" alt="Aarakocra Bard" hidden>
<img src="aarakocra_cleric.png" alt="Aarakocra Cleric" hidden>
<img src="aasimar_barbarian.png" alt="Aasimar Barbarian" hidden>
<img src="aasimar_bard.png" alt="Aasimar Bard" hidden>
<img src="aasimar_cleric.png" alt="Aasimar Cleric" hidden>
</div>
</body>
</html>
JQuery:
jQuery(function($){
var subraces = {
'0' : ['---Select---'],
'Aarakocra' : ['No subrace available'],
'Aasimar' : ['DMG Version', 'Protector Aasimar', 'Scourge Aasimar',
'Fallen Aasimar'],
'Bugbear' : ['No subrace available'],
'Dragonborn' : ['Black', 'Blue', 'Brass', 'Bronze', 'Copper', 'Gold',
'Green', 'Red', 'Silver', 'White'],
'Dwarf' : ['Druegar', 'Hill Dwarf', 'Mountain Dwarf'],
'Elf' : ['Dark Elf', 'Eladrin - DMG Version', 'Eladrin - MToF Version',
'High Elf', 'Sea Elf', 'Shadar-Kai', 'Wood Elf'],
'Firbold' : ['No subrace available'],
'Genasi' : ['Air', 'Earth', 'Fire', 'Water'],
'Gith' : ['Githyanki', 'Githzerai'],
'Gnome': ['Deep Gnome', 'Forest Gnome', 'Rock Gnome'],
'Goblin' : ['No subrace available'],
'Goliath' : ['No subrace available'],
'Half-Elf' : ['Half-Elf', 'Variant'],
'Half-Orc' : ['No subrace available'],
'Halfling' : ['Ghastly', 'Lightfoot', 'Stout'],
'Hobgoblin' : ['No subrace availale'],
'Human' : ['Human', 'Variant'],
'Kenku' : ['No subrace available'],
'Kobold' : ['No subrace available'],
'Lizardfolk' : ['No subrace available'],
'Orc' : ['No subrace available'],
'Serpentblood': ['No subrace available'],
'Tabaxi' : ['No subrace available'],
'Tiefling' : ['Tiefling', 'Feral', 'Lineage of Baalzebul', 'Lineage of
Dispater', 'Lineage of Fierna', 'Lineage of Glasya', 'Lineage of
Levistus', 'Lineage of Mammon', 'Lineage of Mephistopheles', 'Lineage of
Zariel', 'Variant'],
'Triton' : ['No subrace available'],
'Tortle' : ['No subrace available']
}
var $subraces = $('#subrace');
$('#race').change(function () {
var race = $(this).val(), subs = subraces[race] || [];
var html = $.map(sub, function(sub){
return '<option value="' + sub + '">' + sub + '</option>'
}).join('');
$subraces.html(html)
});
});
使用subs而不是sub。将映射函数更改为：
var html = $.map(subs, function(sub) {
return '<option value="' + sub + '">' + sub + '</option>'
}).join('');