Attempting to Use .load But receiving error

Attempting to Use .load But receiving error

Hello all, I am attempting to make a dynamic selection menu system similar to the one that is illustrated at the link here ( https://css-tricks.com/dynamic-dropdowns/ ). I have all of my file paths written correctly,  and my syntax is fine. I am trying to do the following. When the first (of three) drop down menu's is changed, take the drop down menu's selected item's value and go to the .txt file corresponding to that value. Inside that .txt file is just plain HTML written code that I wanted to .load under the second selector tag. Thus changing the options based on the user's selection for the first drop down tag. If I am doing a terrible job explaining this, I do apologize it is must better illustrated at the tutorial link I used ( https://css-tricks.com/dynamic-dropdowns/ ). Here is my code...


HTML: 
  2. <select class = "homepageSelectors , hpSelectorMenu" id = "classSelector" name="classSelector" >
  3.                     <option value= "geometry.txt">Geometry</option>
  4.                     <option value= "english1.txt">English 1</option>
  5.                     <option value= "algebra2.txt">Algebra 2</option>
  6.                 </select>
  7.                 
  8.                 <select class = "homepageSelectors , hpSelectorMenu" id = "levelSelector" name="levelSelector">
  9.                     
  10.                 </select>
  11.                 
  12.                 <select class = "homepageSelectors , hpSelectorMenu" id = "teacherSelector" name="teacherSelector">

  14.                 </select>




Jquery: 
  2. //1. Every Time the class selector has been changed {
  3.     $("#classSelector").change( function () {
  4.         console.log("It works!");
  5.         //1.2: Take the selected item's value
  6.         var $classvalue = $(this).val();
  7.         $("#levelSelector").load("textdata/" + $classvalue);
  8.         //1.3: Target the text document corresponding to the selected element's value
  9.         //1.4: Paste the text from that document underneath the select tag
  10.         
  11.         console.log( $classvalue );
  12.         });
You may have noticed I logged to the console the variable I am using to store the value. This proves to me that the function is getting the correct value from the HTML code. I have checked dozens of times and I am positive that my file base is set up according the the way it is illustrated above. 

Picture of my /textdata foler.



Picture of the console when I make a change to the first drop down selector: 

^^^ I am not sure why the picture gets all crunched up like that. Just right-click and open in new tab to view full size picture. SORRY!


I have been facing this bug for a while. If anyone knows why this is happening or see's an error, or can think of a better, simpler way for me to accomplish my task. Please let me know. Thanks and enjoy the rest of your day. 

-Kylexy32
U.S.A