JQuery changing drop down options based on other option not working

Question

I followed this guide: Use jQuery to change a second select list based on the first select list option

And I always get every single one of the options in the second list no matter what I pick in the first one. Here is my code:

<html>

<title>
Deity's Database: Legend of Zelda fandom
</title>

<head>

<script>

//Sort races via era

$("#eras").change(function() {
  if ($(this).data('options') === undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#races option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#races').html(options);
});

</script>

</head>

<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

What Era?
<select name="eras" id="eras" size="1">
    <option value="blank_era" selected>Choose one</option>
    <option value="ocarina">Ocarina of Time, Majora's Mask</option>
    <option value="twilight">Twilight Princess</option>
    <option value="toon">Wind Waker, Phantom Hourglass, Spirit Tracks</option>
    <option value="sky">Skyward Sword</option>
    <option value="four">Minish Cap, Four Swords, Four Swords Adventures</option>
</select>

<p>

What Race?
<select name="races" id="races" size="1">
    <option value="blank_race" selected>Choose one</option>

    <option value="ocarina">Hylian</option>
    <option value="ocarina">Terminian</option>
    <option value="ocarina">Sheikah</option>
    <option value="ocarina">Kokiri</option>
    <option value="ocarina">Gerudo</option>
    <option value="ocarina">Goron</option>
    <option value="ocarina">Zora</option>
    <option value="ocarina">Deku</option>
    <option value="ocarina">Fairy</option>

    <option value="twilight">Hylian</option>
    <option value="twilight">Human</option>
    <option value="twilight">Twili</option>
    <option value="twilight">Goron</option>
    <option value="twilight">Zora</option>
    <option value="twilight">Yeti</option>
    <option value="twilight">Oocca</option>
    <option value="twilight">Fairy</option>

    <option value="toon">Hylian</option>
    <option value="toon">Human</option>
    <option value="toon">Rito</option>
    <option value="toon">Korok</option>
    <option value="toon">Goron</option>
    <option value="toon">Lokomo</option>
    <option value="toon">Anouki</option>
    <option value="toon">Fairy</option>

    <option value="sky">Skyloftian</option>
    <option value="sky">Demon</option>
    <option value="sky">Goron</option>
    <option value="sky">Kikwi</option>
    <option value="sky">Parella</option>
    <option value="sky">Mogma</option>
    <option value="sky">Robot</option>

    <option value="four">Hylian</option>
    <option value="four">Minish</option>
    <option value="four">Fairy</option>

</select>

</html>

I'd like it to just display the options for that certain value but I get this:

click here

Sorry for the photo of the screen, I couldn't screenshot when the second list was displaying options.

@Dargoncat Your code seems to work fine, here is a [JSFiddle](https://jsfiddle.net/zqd6vbxu/), try replicating the issue and share back! — Naren Murali, Oct 27 '17 at 16:48

Danny Fardy Jhonston Bermúdez · Answer 1 · 2017-10-27T17:17:41.647

Your jQuery code is requiring the jQuery library. In your code, first ran the code and after, called the jQuery library.

You need to run jQuery code when the DOM is ready in the browser. You should use:

$(document).ready(function()
{
   // Code...
});

Or the jQuery short-hand:

$(function()
{
   // Code...
});

I'd like to recommend to use the W3C Markup Validation Service just to help you write a good markup.

This the correct HTML5 markup.

<!DOCTYPE html>
<html>

<head>
  <title>
    Deity's Database: Legend of Zelda fandom
  </title>
  <script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

  <script type="text/javascript">
    $(function() {
      //Sort races via era
      $("#eras").change(function() {
        if ($(this).data('options') === undefined) {
          /*Taking an array of all options-2 and kind of embedding it on the select1*/
          $(this).data('options', $('#races option').clone());
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[value=' + id + ']');
        $('#races').html(options);
      });
    });
  </script>
</head>

<body>
  <p>
    What Era?
    <select name="eras" id="eras" size="1">
        <option value="blank_era" selected>Choose one</option>
        <option value="ocarina">Ocarina of Time, Majora's Mask</option>
        <option value="twilight">Twilight Princess</option>
        <option value="toon">Wind Waker, Phantom Hourglass, Spirit Tracks</option>
        <option value="sky">Skyward Sword</option>
        <option value="four">Minish Cap, Four Swords, Four Swords Adventures</option>
    </select>
  </p>
  <p>
    What Race?
    <select name="races" id="races" size="1">
        <option value="blank_race" selected>Choose one</option>
        <option value="ocarina">Hylian</option>
        <option value="ocarina">Terminian</option>
        <option value="ocarina">Sheikah</option>
        <option value="ocarina">Kokiri</option>
        <option value="ocarina">Gerudo</option>
        <option value="ocarina">Goron</option>
        <option value="ocarina">Zora</option>
        <option value="ocarina">Deku</option>
        <option value="ocarina">Fairy</option>

        <option value="twilight">Hylian</option>
        <option value="twilight">Human</option>
        <option value="twilight">Twili</option>
        <option value="twilight">Goron</option>
        <option value="twilight">Zora</option>
        <option value="twilight">Yeti</option>
        <option value="twilight">Oocca</option>
        <option value="twilight">Fairy</option>
        
        <option value="toon">Hylian</option>
        <option value="toon">Human</option>
        <option value="toon">Rito</option>
        <option value="toon">Korok</option>
        <option value="toon">Goron</option>
        <option value="toon">Lokomo</option>
        <option value="toon">Anouki</option>
        <option value="toon">Fairy</option>
        
        <option value="sky">Skyloftian</option>
        <option value="sky">Demon</option>
        <option value="sky">Goron</option>
        <option value="sky">Kikwi</option>
        <option value="sky">Parella</option>
        <option value="sky">Mogma</option>
        <option value="sky">Robot</option>
        
        <option value="four">Hylian</option>
        <option value="four">Minish</option>
        <option value="four">Fairy</option>
    </select>
  </p>
</body>

</html>

Hope this helps.

So if my code works, could it be something with my PC then? I had read that html5 doesn't need to add script type = text/javascript because it was there by default, so I took it out. — Dragoncat, Oct 27 '17 at 18:44
You can't execute jQuery code before to load the jQuery library. That was the reason. — Danny Fardy Jhonston Bermúdez, Oct 27 '17 at 19:02
Hmm @Dragoncat, Can you test directly this code in a new html file? Just copy, paste and execute this code in your browser. — Danny Fardy Jhonston Bermúdez, Oct 27 '17 at 22:08

score 0 · Answer 2 · answered Jul 13 '18 at 06:01

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>




<select name="select2" id="select2">
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM<option>
</select>


$("#select1").change(function() {
    if ($(this).data('options') === undefined) {
        $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
});

JQuery changing drop down options based on other option not working

2 Answers2