IT教程 | 加入收藏 | 简体 | 繁体
Ajax教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Ajax教程

Ajax 实现筛选功能的示例代码

2016-06-02来源:[www.121ask.com]热度:0℃ 【字体:

Ajax 实现筛选功能的示例代码:

< script src="../js/jquery-1.8.3.min.js"></script>
 
< script type="text/javascript">
   $(document).ready(function(){
        $.post("http地址",{startrow:0,pagesize:100},function(data,state){
        $("#showhtml").html(data);
     });
      });
   function zpsx(k) {
    var cls=k.substring(0,1);
    // alert(cls);
   if(cls=='s'){
   var str1= $("#"+k).text();
   var str2= $(".filter dl .ddt .active").text();
    }
    if(cls=='t'){
   var str1= $(".filter dl .dds .active").text();
   var str2= $("#"+k).text();
    }
    if(str1=="全部"){
      str1="";
    }
    if(str2=="全部"){
      str2="";
    }
     $(".filter dl .dd"+cls+" a[class*='active']").removeClass("active");
     $("#"+k).addClass("active");
        $.post("http地址",{startrow:0,pagesize:100,k1:str1,k2:str2},function(data,state){
        $("#showhtml").html(data);
     });
     }
  
        function zpss(){
     var key=$("#key").val();
     if(key==""){
     alert("请输入职位名称!");
     }else{
    $(".filter dl dd a[class*='active']").removeClass("active");
       $.post("http地址",{startrow:0,pagesize:100,key:key},function(data,state){
        $("#showhtml").html(data);
       });
     }
  }
    
</script>

<h3 class="innerTitle">招聘职位</h3>
   <div class="posWrap">
    <!-- 职位搜索 -->
    <div class="posSearch">
      <input type="text" class="posText" id="key" placeholder="请输入职位名称搜索">
      <input type="button" class="posSubm" value="职位搜索" onClick="zpss()">
    </div>

    <!-- 职位筛选 -->
    <div class="filter">
     <dl class="clearfix">
      <dt style="background:url(../images/posAdd.png) no-repeat 19px center;">工作地点</dt>
      <dd class="dds">
       <a href="javascript:void(0)" id="s0" onClick="zpsx('s0')">全部</a>
                            <a href="javascript:void(0)" id="s1" onClick="zpsx('s1')">国内</a>
                            <a href="javascript:void(0)" id="s2" onClick="zpsx('s2')">国外</a>
      </dd>
     </dl>
     <dl class="clearfix">
      <dt style="background:url(../images/posClass.png) no-repeat 16px center;">职位类别</dt>
      <dd class="ddt">
       <a href="javascript:void(0)" id="t0" onClick="zpsx('t0')">全部</a>
                            <a href="javascript:void(0)" id="t1" onClick="zpsx('t1')">销售</a>
                            <a href="javascript:void(0)" id="t2" onClick="zpsx('t2')">技术</a>
                            <a href="javascript:void(0)" id="t3" onClick="zpsx('t3')">运营</a>
                            <a href="javascript:void(0)" id="t4" onClick="zpsx('t4')">职能</a>
                            <a href="javascript:void(0)" id="t5" onClick="zpsx('t5')">操作</a>
      </dd>
     </dl>
    
    </div>

    <div class="pos" id="showhtml">
 
     </div>
 

以上IT文章《Ajax 实现筛选功能的示例代码》由名客技术网[www.121ask.com]提供阅读!
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3