CODEWITHSUNDEEP
javascriptjquery
Dragoncat
Dragoncat

Reputation: 1

JQuery changing drop down options based on other option not working

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.

Upvotes: 0

Views: 47

Answers (2)

vino
vino

Reputation: 117

<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);
});

Upvotes: 0

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

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>

enter image description here

Hope this helps.

Upvotes: 1

Related Questions