JQuery не может прочитать свойство нулевой ошибки

Question

Привет Я изучаю JQuery, и я не могу заставить его запустить код функции ниже.

Я установил простой блок выбора, а затем попытался добавить к нему событие смены. Первоначально я попробовал с .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 оленья кожа существует в текущем контексте :) Вы также можете использовать

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

Answer 2

Ваш код должен читаться следующим образом

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

roomStyle не существует как id для любого элемента.