stackoom
  简体   繁体   中英

JQuery changing drop down options based on other option not working

 原文  2017-10-27 16:43:23  3   2    javascript/ jquery

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.

2 answers

solution1
 1  2017-10-27 16:51:26

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.

solution2
 0  2018-07-13 06:01:45

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery populate drop-down options based on another drop-down option using Javascript Object Literal Drop down option not working in jQuery jQuery show/hide options from one select drop down doesn't work, when option on other drop down is selected jQuery show/hide options from one select drop down, when option on other select dropdown is slected Jquery drop down option on based previous selction Change the drop down option based on the selected option from other combobox Changing the Drop-down option based on the url from navigation menu Alter options on dynamically added drop down menu based on other selections Why isn't drop down changing based on other value? jQuery change text based on drop down list option
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM