如何在select选项变更时修改hidden输入框nowPage值并重置页码

我需要在select选项变更提交时，把隐藏输入框nowPage的数值重置为1。目前遇到的问题是：点击页码2之后再切换选择框选项，页码依然停留在2，达不到重置效果。

现有HTML代码 #

<form action="/list.do" name="searchForm" id="searchForm" method="get">
<input type="hidden" id="nowPage" name="nowPage" value="<%=request.getParameter("nowPage")%>">
<select name="boardlineCount" id="boardlineCount" title="count" onchange="this.form.submit();">
  <option value="10">count</option>
  <option value="5" <c:if test="${param.boardlineCount eq '5'}">selected </c:if>>5</option>
  <option value="30" <c:if test="${param.boardlineCount eq '30'}">selected </c:if>>30</option>
  <option value="50" <c:if test="${param.boardlineCount eq '50'}"> selected </c:if>>50</option>
  <option value="100" <c:if test="${param.boardlineCount eq '100'}"> selected </c:if>>100</option>
</select>
</form>

我尝试的脚本 #

<script>
  $(function(){
        $('#boardlineCount').on('change',function(){
            $("#nowPage").val("1");
        console.log("?????");
        });
    });
</script>

问题出在哪 #

你的脚本没生效的核心原因是：select标签自带的onchange="this.form.submit()"内联事件会比jQuery绑定的change事件先执行——表单已经提交走了，你设置nowPage值的代码根本没机会运行，自然看不到效果。

两种修复方案 #

方案一：移除内联事件，统一用jQuery处理

把select标签上的onchange属性删掉，然后在jQuery的change事件里先重置页码，再手动提交表单：

<!-- 修改后的select标签 -->
<select name="boardlineCount" id="boardlineCount" title="count">
  <!-- 选项内容保持不变 -->
</select>

<script>
  $(function(){
        $('#boardlineCount').on('change',function(){
            $("#nowPage").val("1");
            $("#searchForm").submit(); // 手动触发表单提交
        });
    });
</script>

方案二：修改内联事件，先重置再提交

直接在select的onchange里先设置nowPage的值，再提交表单，甚至可以不用额外的jQuery脚本：

<!-- 用jQuery的写法 -->
<select name="boardlineCount" id="boardlineCount" title="count" onchange="$('#nowPage').val('1'); this.form.submit();">
  <!-- 选项内容不变 -->
</select>

如果不想依赖jQuery，用原生JS也可以：

<select name="boardlineCount" id="boardlineCount" title="count" onchange="document.getElementById('nowPage').value='1'; this.form.submit();">
  <!-- 选项内容不变 -->
</select>

内容的提问来源于stack exchange，提问作者hayley