Javascript 不适用于表单输入和隐藏选项

Question

所以我试图做非常基本的形式，当用户选择和选项时，它会在其下显示更多相关框。我发现这里的一些东西非常相似，我可以让它们在 jsfiddle 中工作，但无法让它们在我的页面上工作。想知道我做错了什么。在我的脑海中，我只有标准查询链接和指向我的文件的链接。我也尝试过将脚本本身(带有适当的周围代码)放在我的文件的头部，但它仍然无法正常工作。

我的第二部分问题是，我希望我的 javascript 位于外部文件中。该脚本看起来与我过去使用的其他脚本略有不同，因此我希望获得一些帮助以使其对外部友好。

<fieldset>
 <form action="add_card.php" method="post">
 <legend>TEST</legend>
 Parallel: <select name="parallel" id="parallel">
  <option></option>
  <option value="Insert">insert</option>
  <option value="Base">base</option>
  <option value="Award">award</option>    
 </select>
 <div id="insert" style="display:none;">    
   Pack: <input type="string" name="pack" id="pack"></label>
 </div>
 <input type="submit" />
 </form>
</fieldset>    

现在我的外部文件看起来像这样

$('#parallel').on('change',function(){
    if( $(this).val()==="Insert"){
    $("#insert").show()
    }
    else{
    $("#insert").hide()
    }
});

这是它在 jsfiddle 中的工作情况，我删除了现在不太重要的所有内容。 link

//编辑必须修复从两个地方复制代码时出现的拼写错误。

Answer 1

尝试使用更改功能

$('#parallel_test').change(function(){
    if( $(this).val()=="Insert"){
        $("#insert_test").show()
    }
    else{
        $("#insert_test").hide()
    }
});