Question

我遵循了这个指南：Use jQuery to change a second select list based on the first select list option

无论我在第一个列表中选择什么，我总是在第二个列表中获得每个选项。这是我的代码：

<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>

我希望只显示该特定值的选项，但我明白了：

click here

很抱歉屏幕上的照片，当第二个列表显示选项时，我无法截屏。

Answer 1

您的jQuery代码需要jQuery库。在您的代码中，首先运行代码，然后调用jQuery库。

当DOM在浏览器中准备就绪时，您需要运行jQuery代码。你应该使用：

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

或jQuery简写：

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

我建议您使用W3C Markup Validation Service来帮助您撰写好的标记。

这是正确的HTML5标记。

<!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>

希望这有帮助。

Answer 2

<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根据其他选项无法更改下拉选项

2 个答案: