Javascript jQuery脚本在JSFIDLE上运行，但不在本地运行_Javascript_Jquery_Html

Javascript jQuery脚本在JSFIDLE上运行，但不在本地运行

javascript jquery html

Javascript jQuery脚本在JSFIDLE上运行，但不在本地运行,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用我找到的脚本在我的网页上创建一个相关下拉列表。不幸地虽然代码可以正常工作，但在我这方面根本不起作用 var$select1=（'select1'）， $select2=（“#select2”）， $options=$select2.find（'option'）； $select1.on（'change'，function（）{ $select2.html（$options.filter（'[value=“'+this.value+'“]'））； }).触发（“变更”）水果动

我正在尝试使用我找到的脚本在我的网页上创建一个相关下拉列表。不幸地虽然代码可以正常工作，但在我这方面根本不起作用

var$select1=（'select1'），
$select2=（“#select2”），
$options=$select2.find（'option'）；
$select1.on（'change'，function（）{
$select2.html（$options.filter（'[value=“'+this.value+'“]'））；
}).触发（“变更”）

水果
动物
鸟
汽车
香蕉
苹果
橙色
狼
狐
熊
鹰
鹰
BWM
我以前去过那里
尝试用以下内容包装代码：
$( document ).ready(function() {
    //  Your code here
});

CodePen会自动执行此操作
这里的错误是您的JavaScript在加载HTML之前运行，因此您的#select1
和#select2
实际上还不存在。你要找的东西还没装好
更新
注释部分提出了一些好的观点，但我的回答仍然是解决代码无法工作的主要原因。以下是将在浏览器中运行的完整代码段

=
$（函数（）{
变量$select1=$（“#select1”），
$select2=$（“#select2”），
$options=$select2.find（'option'）；
$select1.on（'change'，function（）{
$select2.html（$options.filter（'[value=“'+this.value+'“]'））；
}）。触发器（‘更改’）；
});
水果
动物
鸟
汽车
香蕉
苹果
橙色
狼
狐
熊
鹰
鹰
BWM
你能说得更具体些吗？到底是什么不起作用？你看到了什么错误？所以你给了我们一个有效的例子，但是你没有给我们任何东西来重现你这边的问题。我们应该如何提供帮助？为什么要调用jQuery两次？@QuentinVeron还有，两个不同的版本如果有两个版本的jQuery，请删除一个并使用document.ready处理程序。我建议你熟悉一下。投票结束是一个打字错误。
<!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>