我遵循了这个指南: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>
我希望它只显示该特定值的选项，但我得到了:
抱歉，屏幕照片，当第二个列表显示选项时，我无法截图。
最佳答案
您的 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> 
希望这有帮助。
关于javascript - JQuery 根据其他选项更改下拉选项不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46979862/