Jquery来制作翻页的下拉列表

<div class="right">
   <a href="cpManagerInit.ca">首页</a>
   <a href="#" name="upPage">上一页</a>
   <a href="#" name="downPage">下一页</a>
   <a href="#" name="endPage" pageSize="${requestScope.pageCount}">末页</a>
   <select name="pageNo" class="wd_80" def="${requestScope.pageNo}" heh="1">
        <c:forEach var="count" begin="1" end="${requestScope.pageCount}">
             <option value="${count}">${count}</option>
        </c:forEach>
   </select>
</div>

  很多时候,在后台页面要求页面布局 
-----------------分页按钮  [下拉列表] 
    +++++++++ 
    +++++++++     <-- 内容列表 
    +++++++++ 
-----------------分页按钮  [下拉列表]

//上页
       $("a[name=\'upPage\']").click(function(){
           //当前页
           var pageN= parseInt($("select[name=\'pageNo\']").val());
           var pageNumber=0;
           if(pageN==1){
               pageNumber=1;
           }else{
               pageNumber=pageN-1;
               location.href="pageGetCpLists.ca?pageNo="+pageNumber+"&checkType=通过&enable=not";
           }
       })
        //下页
       $("a[name=\'downPage\']").click(function(){
           //当前页
           var currentPage = parseInt($("a[name=\'endPage\']").attr("pageSize"));
           var pageN= parseInt($("select[name=\'pageNo\']").val());
           var pageNumber=0;
           if(pageN==currentPage){
               pageNumber=currentPage;
           }else{
               pageNumber=pageN+1;
               location.href="pageGetCpLists.ca?pageNo="+pageNumber+"&checkType=通过&enable=not";
           }
       })
        //末页
       $("a[name=\'endPage\']").click(function(){
           var pageNumber = parseInt($(this).attr("pageSize"));
           location.href="pageGetCpLists.ca?pageNo="+pageNumber+"&checkType=通过&enable=not";
       })
        //下拉换页
       [color=red]$("select[name=\'pageNo\']").change(function(){
           var number = parseInt($("select[name=\'pageNo\']").val());
           if($(this).attr("heh")==2){
               number = parseInt($(this).val());
           }
           //alert($("select[name=\'pageNo\']").select().val());
           location.href="pageGetCpLists.ca?pageNo="+number+"&checkType=通过&enable=not";
       })[/color]
        //初始化下拉
        if($("select[name=\'pageNo\']").attr("def")!=null){
             $("select[name=\'pageNo\']").val($("select[name=\'pageNo\']").attr("def"));
        }
        
    })


这个时候,上,下,首,末(页)都不会有问题,上边下边都ok.因为这4对按钮,或者超链接,只是完成单一功能,而标识不会影响结果. 
但是如果用下拉列表来翻页时,大家就会发现!上边的可以使用,但是下边的使用不了!为什么呢,因为标识不同,而下拉列表的功能实现就是用标识来完成,当获取下拉列表时会有2个,因为标识不同,js会自动把第一个当做标准,所以翻页也就是本页面,eq和index方法都是同级父类下子元素的索引,应该也可以实现!

posted @ 2013-09-13 16:48  暖流  阅读(408)  评论(0编辑  收藏  举报