Question

我正在尝试使用发现的脚本在我的网页上创建一个依赖的下拉列表。不幸。虽然代码可以在jsFiddle上正常运行，但对我而言根本不起作用。

mlock

var $select1 = ('#select1'),
  $select2 = ('#select2'),
  $options = $select2.find('option');

$select1.on('change', function() {
  $select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');

我对HTML和JS还是很陌生，所以如果我犯了任何非常明显的错误，请原谅我！

Answer 1

我以前去过那里。

尝试使用以下代码包装代码：

$( document ).ready(function() {
    //  Your code here
});

CodePen自动执行此操作。

这里的错误是您的JavaScript在HTML加载之前就已在运行，因此您的#select1和#select2实际上还不存在。您正在寻找尚未加载的东西。

更新

注释部分提出了一些意见，但是我的答案仍然是解决主要原因，因为您的代码无法正常工作。这是将在您的浏览器中运行的完整代码段

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

jQuery脚本在jsFiddle上运行，但不在本地运行

1 个答案: