下拉框option选中后跳转的小问题

这两天遇到的一个需求：选中下拉框的某个option之后改变页面，本来挺简单的一个东西，被我各种走弯路：加a标签；加点击事件；利用ajax与controller交互……后来发现几行代码能解决的问题，困扰了我一两天……看来我的水平还有很大的提升空间啊（只能这么安慰自己了哈哈）

首先看html代码：

 <select id="product_type_options" data-am-selected="{btnSize: 'sm'}" onchange="optionClick()">
              <option value="all">所有类别</option>
              <c:forEach items="${productTypes}" var="productType">
                      <option value="${productType.getProductTypeId()}">
                          ${productType.getName()}
<%--                          <a onclick="optionClick()">${productType.getName()}</a>--%>
<%--                          <a href="${ctx}/product/req_classified_product_list?productTypeId=${productType.getProductTypeId()}">${productType.getName()}</a>--%>
<%--                          <a href="https://www.baidu.com/">${productType.getName()}</a>--%>
                      </option>
              </c:forEach>
            </select>

然后是js代码：

<script type="text/javascript">
        function optionClick(){
            var obj = document.getElementById("product_type_options"); //定位optionid
            var index = obj.selectedIndex;
            var value = obj.options[index].value;// 被选中option的值
            window.location.href="${ctx}/product/req_classified_product_list?productTypeId=" + value;
        }
    </script>