为什么我的HTML下拉列表无法找到我的功能？

Question

所以我想创建一个简单的下拉菜单，当点击一个值时，会运行一个函数，但是我在访问该函数时遇到了一些问题。

当我运行this fiddle（下面的代码）时，我收到一条控制台消息＆＃39; make it＆＃39;。

HTML 的

<div id="dropdown">
<select>
    <option>Near</option>
    <option onclick="console.log('made it');">Far</option>
    <option>Very Far</option>
    <option>Distant</option>
</select>
</div>

但是如果我尝试将消息移动到函数like in this fiddle（下面的代码）中，我会收到一条错误，指出函数test未定义。

HTML 的

<div id="dropdown">
<select>
    <option>Near</option>
    <option onclick="test();">Far</option>
    <option>Very Far</option>
    <option>Distant</option>
</select>
</div>

的JavaScript

var test = function () {
    console.log("Made it");
};

有人可以解释为什么会这样吗？我的HTML onclick无法找到test()功能吗？