这两天遇到的一个需求:选中下拉框的某个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>