更改另一个选择值时如何更新选择值

Question

我有一个<select>，如下所示：

<div class="form-group">
  <div class="styled-select clearfix">
    <select class="wide required" name="Services">

      <option value="Event Manager Rs 6,000">Event Manager</option>
      <option value="Vendor Rs 5,000">Vendor</option>
      <option value="Artist Rs 4,000">Artist</option>
      <option value="Manpower Supply Rs 3,000">Manpower Supply</option>
    </select>
  </div>

</div>

此选择框之后是另一个与之相关的框：

<div class="form-group">
  <div class="styled-select clearfix">
    <select class="wide required" name="Fee">

      <option value="Event Manager Rs 6,000">Event Manager Rs 6,000</option>
      <option value="Vendor Rs 5,000">Vendor Rs 5,000</option>
      <option value="Artist Rs 4,000">Artist Rs 4,000</option>
      <option value="Manpower Supply Rs 3,000">Manpower Supply Rs 3,000</option>
    </select>
  </div>

</div>

因此，当用户更改第一个选择框选择时，第二个应相应地自动更改。

我该怎么做？