Javascript 填充下拉菜单列表

我有以下[小提琴][1]。我正在努力实现两件事&我在第一个障碍上摔倒了

我想有一个下拉菜单，当鼠标悬停在上面时，可以显示区域列表。将鼠标悬停在零件上可以工作，但是没有列出任何区域。我认为这与下面的代码有关。但是我不确定到底是怎么回事？在我的实际项目中，我使用一个AJAX调用来填充菜单，但我想知道下面的代码有什么问题

最终目标是单击其中一个区域，并调用javascript函数

$（文档）.ready（函数（）{
变量$region=$（“#regionList”）；
$region.append（“
欧洲”
”）；
$region.append（'li>日本'）；
$region.append（“
北美”
”）；
})

/*下拉按钮*/
.dropbtn{
背景色：#9FACEC；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#ddd；}
/*悬停时显示下拉菜单*/
.dropdown:hover.dropdown内容{display:block；}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:hover.dropbtn{背景色：#4C66E9；}

区域

未定义jQuery，如果要使用$，则需要包含jQuery

$ is not defined

---

如果我在小提琴上打开jQuery，它会显示区域。检查您的控制台是否有错误。请在打开JQuery的情况下进行检查-@谢谢，刚刚开始使用它。现在已经定义了jQuery并且正在工作