填充下拉菜单列表

Question

I have the following [fiddle][1]. I am trying to achieve two things & I have fallen at the first hurdle.

I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?

The end goal is where one of the regions is clicked on a javascript function will be called

 $(document).ready(function () { var $region = $('#regionList'); $region.append('<li><a>Europe</a></li>'); $region.append('<li><a>Japan</a></li>'); $region.append('<li><a>North America</a></li>'); }) 

  /* Dropdown Button */ .dropbtn { background-color: #9FACEC; color: white; padding: 16px; font-size: 16px; border: none; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #ddd;} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content {display: block;} /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn {background-color: #4C66E9;} 

 <div class="dropdown"> <button class="dropbtn">Regions</button> <div class="dropdown-content"> <ul id="regionList"></ul> </div> </div> 

Answer 1

jQuery is not defined, you'll need to include jQuery if you want to use $.

$ is not defined

http://jsfiddle.net/d2v7fLpj/