怎么用一个type为reset的按钮去重置下拉选框的内容?

Question

<form id="form1" name="form1">
<ul>

<li>
  <div class="am-btn-group am-btn-group-xs">*审核状态
  <select data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}" id="agtStatus" name="agtStatus" onchange="getAgent()">
    <option value="">选择代理</option>
    
    <#if statusSelect == "Y">
     <option value="Y" selected='selected'>已审核</option>
     <#else>
    <option value="Y" >已审核</option>
     </#if>
     
     <#if statusSelect == "N">
     <option value="N" selected='selected'>未审核</option>
     <#else>
    <option value="N" >未审核</option>
     </#if>

    
    <!-- <option value="Y">已审核</option>
    <option value="N">未审核</option> -->
    
  </select>
  </div>
</li>

<li>
  <div class="am-btn-group am-btn-group-xs">*代理商
    <select  id="agentId" name="agentId">
      <option value="0">选择代理</option>
      <#list agentUser as agent>
     <!--  <option value=${agent.id} >${agent.phone}</option>-->
     <#if idSelect == agent.id>
     <option value=${agent.id} selected='selected'>${agent.phone}</option>
     <#else>
     <option value=${agent.id} >${agent.phone}</option>
     </#if>
    </#list>
      
    </select>
  </div>
</li>






<li><button type="reset" class="am-btn am-radius am-btn-xs am-btn-success" style="margin-top: -1px;">重置</button></li>

</ul>
</form>

两个下拉框，现在点击这个重置按钮，第一个会被重置，第二个不变