Hi I'm learning Jquery and I can't get it to run a function - code below.

I've set up a simple select box and then tried to add an on change event to it. Originally I tried with a .change but then I read that using the method shown is better since it doesn't rely on the element being available at the start.

I'm just getting an error of Uncaught TypeError: Cannot read property 'find' of null. I've not used jsfiddle before but I've tried to set one up here /

Help!

            <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=".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>

Hi I'm learning Jquery and I can't get it to run a function - code below.

I've set up a simple select box and then tried to add an on change event to it. Originally I tried with a .change but then I read that using the method shown is better since it doesn't rely on the element being available at the start.

I'm just getting an error of Uncaught TypeError: Cannot read property 'find' of null. I've not used jsfiddle before but I've tried to set one up here https://jsfiddle/2L6z3fdm/

Help!

            <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./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>

• javascript
• jquery
• bind

Share Improve this question Follow asked Dec 8, 2015 at 9:41 johnjohn 311 gold badge11 silver badge33 bronze badges 6

• 1 roomStyle is ID of which element? – AkshayJ Commented Dec 8, 2015 at 9:44
• You havn't got an element with an id of roomStyle (same in your fiddle). – Liam Commented Dec 8, 2015 at 9:46
• please note that you should use delegated events (.on) only when you are adding the target element (#roomCapacity) after the page has been rendered by the browser. In this case you can use change without any problem. – Lelio Faieta Commented Dec 8, 2015 at 9:49
• Try $(this).find('option:not(:first)').remove(); Fiddle – Rayon Commented Dec 8, 2015 at 9:50
• @LelioFaieta, that's not true, even .click uses .on under the hood. – Liam Commented Dec 8, 2015 at 9:51

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

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

roomStyle doesnt exist in the current context :) You can also use

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

Your code should read as follows

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

roomStyle does not exist as the id for any element.