下拉选项根据另一个下拉选项而变化

Question

我有一个有几个下拉菜单的表单。我需要让第二个依赖于第一个的值。我有一个Codepen，显示四个下拉列表。第一个不会改变，但选择2,3和4显示我想要的预期选项。 下面列出了下拉列表1的哪个选项导致第二个。

new -> input-2
client -> input-3
admin -> input-4

我在MVC中的OpenCart中这样做，所以如果这一切都在视图文件中完成，或者我需要在控制器中完成一些操作，我会有点困惑，如果是这样的话，怎么办？我相信JavaScript可以在这里提供帮助，但不确定如何实现它。我的代码笔是：

https://codepen.io/anon_guy/pen/pdbYad

<form action="/action_page.php">

  <select name="Input-1">
    <option value="*"></option>
    <option value="new">new</option>
    <option value="client">client</option>
    <option value="admin">admin</option>  
  </select>

  <select name="Input-2">
    <option value="sign-up">Sign Up</option>  
  </select>

  <select name="Input-3">
    <option value="upgrade">upgrade</option>  
    <option value="stats">stats</option>  
  </select>

  <select name="Input-4">
    <option value="view-accounts">view all</option>  
    <option value="add">add</option>  
     <option value="remove">remove</option>  
  </select>
  <input type="submit">
</form>