Jquery 无法读取 属性 of null 错误

Question

您好，我正在学习 Jquery，但我无法将其转化为 运行 函数 - 下面的代码。

我设置了一个简单的 select 框，然后尝试向其中添加一个更改事件。最初我尝试使用 .change 但后来我读到使用显示的方法更好，因为它不依赖于开始时可用的元素。

我刚收到 Uncaught TypeError 错误：无法读取 属性 'find' of null。我以前没有用过 jsfiddle，但我试着在这里设置一个 https://jsfiddle.net/2L6z3fdm/

求助！

            <select id="roomCapacity" >
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script> 
             $( "#roomCapacity" ).on("change",function(){
                        roomLayoutBox = ["Volvo","Ford"];
                        console.log(this.value);
                        $('#roomStyle').find('option:not(:first)').remove();

                    });
            </script>

Answer 1

您的代码应如下所示

$("#roomCapacity").on("change",function(){
  roomLayoutBox = ["Volvo","Ford"];
  console.log(this.value);
  $("#roomCapacity").find('option:not(:first)').remove();
});

roomStyle 不存在作为任何元素的 id。

Answer 2

$("#roomCapacity").on("change",function(){
  roomLayoutBox = ["Volvo","Ford"];
  console.log(this.value);
  $("#roomCapacity").find('option:not(:first)').remove();
});

roomStyle 在当前上下文中不存在 :) 您也可以使用

$(this).find('option:not(:first)').remove();