Question

我正在尝试使用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)
 });
});

Answer 1

使用subs代替sub。将地图功能更改为此：

var html = $.map(subs, function(sub) {
    return '<option value="' + sub + '">' + sub + '</option>'
}).join('');

级联下拉菜单不适用于JQuery

1 个答案: