Каскадное раскрывающееся меню не работает с JQuery

Я пытаюсь использовать 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)
 });
});

jquery html drop-down-menu cascadingdropdown

24.11.2018 22:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 1

Используйте подпрограммы вместо подпрограммы. Измените функцию карты на это:

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

26.11.2018 08:01

Другие вопросы по теме

Как использовать DOM-ссылки .value в разных областях? (проблема рефакторинга / объема)

Проблема со сдвигом шифра Цезаря javascript

Angular 6 (TypeScript) - проверьте, является ли пользователь новым (недавно зарегистрированным) или старым пользователем

Проблема css с адаптивным дизайном в Shopify

Сделайте так, чтобы макет лезвия появлялся только тогда, когда пользователи выбирают из раскрывающегося списка, используя PHP Laravel

Как я могу добавить класс к входу типа submit в html, если он не будет удален после добавления?

Конвертировать время секундомера в секунды

Как проверить, состоит ли выделенный текст в Интернете только из слов JavaScript?

Скрытие определенных изображений на телефонах

Граница текстового поля перезаписана другим классом

Каскадное раскрывающееся меню не работает с JQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы