我正在尝试使用我发现的脚本在我的网页上创建依赖下拉列表。很遗憾。虽然代码在 jsFiddle 上正常工作，这对我来说根本不起作用。
var $select1 = ('#select1'),
$select2 = ('#select2'),
$options = $select2.find('option');
$select1.on('change', function() {
$select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="col-xs-6">
<select class="form-control" 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>
</div>
<div class="col-xs-6">
<select class="form-control" 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>
</div>
</body>
</html>我对 HTML 和 JS 还很陌生，所以如果我犯了任何非常明显的错误，请原谅我!
最佳答案
我以前去过那里。
尝试使用以下内容包装您的代码:
$( document ).ready(function() {
// Your code here
});
CodePen 会自动执行此操作。
这里的错误是您的 JavaScript 在 HTML 加载之前运行，因此您的 #select1 和 #select2 实际上还不存在。您正在寻找尚未加载的内容。
更新
The comment section has made some good points, but my answer is still addressing the primary reason your code has not been working. Here is the full snippet which will run in your browser
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>=
<script>
$(function() {
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
});
</script>
</head>
<body>
<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>
</body>
</html>
关于javascript - jQuery 脚本在 jsFiddle 上运行但不在本地运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52671269/