ajax jquery 實現搜索 回調數據 全選 加反選



最近感覺寫jquery水平提高,幫朋友的感覺不錯


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" src="jquery.js"></script>
<style type="text/css">
#ln_find_time{ float:left;}
#ln_find_place{ float:left;}
#ln_find_language{ float:left;}
#ln_find_geshi{ float:left;}
#ln_find_kind{ float:left;}
#ln_find_singer{ float:left;}
</style>
<script language="javascript">
//顯示選擇內容
function finddata(divname,selval){
    selectname = "#sel_"+divname+" option:selected";
    outdivname = '#ln_'+divname;
    indivname = '#'+divname;

    if(selval!=0){
        $(".z_h").show();
        content = $(selectname).text();
        closevar = "'"+divname+"'";
        var ddd = '<div id="ln_'+divname+'" style="display:none;"><span id="'+divname+'"></span><span><a href="javascript:void(0);" onclick="closeDiv('+closevar+')">X</a></span></div>';                
        $(".z_h").append(ddd);    
        $(indivname).html(content);
        $(outdivname).show();
    }else{
        closeDiv(divname);
    }
}

//關閉選擇內容
function closeDiv(divname){
    outdivname = '#ln_'+divname;
    indivname = '#'+divname;
    selectname = "#sel_"+divname;
    $(indivname).html("");
    $(outdivname).hide();
    $(selectname)[0].selectedIndex = 0;
}

//ajax獲取查找數據
function sendData(){
    var newtime = $("#sel_find_time option:selected").val();
    var newkind = $("#sel_find_kind option:selected").val();
    var newlanguage = $("#sel_find_language option:selected").val();
    var newgeshi = $("#sel_find_geshi option:selected").val();
    $.ajax({
        type:"POST",
        url:"find.php",
        data:"newtime="+newtime+"&newkind="+newkind+"&newlanguage="+newlanguage+"&newgeshi="+newgeshi,
        success:function(data){
            alert(data);
            $("#result").html(data);
        }
    });    
    }
    
//全選和取消
$("document").ready(function(){
    $("#allcheck").click(function(){  
     if(this.checked){
        $("input[name='trkid']").each(function(){this.checked=true;});
    }else{
        $("input[name='trkid']").each(function(){this.checked=false;});
    }
    });
});

//反選
function selfan(){
    $("[name='trkid']").each(function(){
        if($(this).attr("checked")){
            $(this).removeAttr("checked");
        }else{
            $(this).attr("checked",'true');
        }
    })
}

 function setCheckbox(){
        $("input[name='trkid']").attr("checked",'true');
}

</script>
</head>

<body>
<div id="result"></div>
            <select name="sel_find_time"  id="sel_find_time" onchange="finddata('find_time',this.value);">
              <option value="0" >按時間</option>
              <option value="1">近三天</option>
              <option value="2">近半月</option>
              <option value="3">近一月</option>
              <option value="4">近半年</option>
              <option value="5">近一年</option>
              <option value="-1">不限</option>
            </select>
             <select name="sel_find_kind"  id="sel_find_kind" onchange="finddata('find_kind',this.value);">
              <option value="0" selected="selected">按曲種</option>
              <option value="1">流行歌曲</option>
              <option value="2">對唱歌曲</option>
                  <option value="-1">不限</option>
            </select>
             <select name="sel_find_language"  id="sel_find_language" onchange="finddata('find_language',this.value);">
              <option value="0" selected="selected">按語言</option>
              <option value="1">國語</option>
                   <option value="5">韓語</option>
              <option value="-1">不限</option>
            </select>
             <select  name="sel_find_geshi"  id="sel_find_geshi" onchange="finddata('find_geshi',this.value);">
              <option value="0" selected="selected">按格式</option>
              <option value="1">DVD</option>
              <option value="2">VCD</option>
              <option value="-1">不限</option>
            </select>
          
            <input name="搜索" type="button" value="確定" onclick="sendData()" />

     <div class="z_h" style="display:none;">
        <div id="show_ln" style="float:left;;">您已選擇:</div>        
    </div>
        
      
    <!-- 全選反選-->
    <div style="clear:both;"></div>
    <div style="float:left;"> <input type="checkbox" id="allcheck" name="allcheck" ></div>
    <a href="javascript:void(0);" onclick="setCheckbox();" ><div id="findall" style="float:left;"> 全選</div></a>
            <div style="float:left"><a href="javascript:void(0);" onclick="selfan();"> 反選 </a></div>

    <input type="checkbox" name="trkid" value="checkbox1">
    checkbox1
    <input type="checkbox" name="trkid" value="checkbox2">
    checkbox2
    <input type="checkbox" name="trkid" value="checkbox3">
    checkbox3
    <input type="checkbox" name="trkid" value="checkbox4">
        

</body>

</html>



find.php

<?php

$newtime = $_REQUEST["newtime"];
$newkind = $_REQUEST["newkind"];
$newlanguage = $_REQUEST["newlanguage"];
$newgeshi = $_REQUEST["newgeshi"];
$newsinger = $_REQUEST["newsinger"];
$newplace = $_REQUEST["newplace"];


$sql = "SELECT * FROM 表 WHERE 1=1 ";

if ($newtime && $newtime!=-1) {
    $findtime = changetime($newtime);
    $sql.= " AND inputtime >=".$findtime;
}

if ($newkind && $newtime!=-1) {
    $sql.= " AND typeid =".$newkind;
}
if ($newlanguage && $newtime!=-1) {
    $sql.= " AND language ='".$newlanguage."'";
}
if ($newgeshi && $newtime!=-1) {
    $sql.= " AND Codec='".$newgeshi."'";
}


//與數據庫相連或者所有數據

$resut = $sql;
$output = json_encode($resut);
//輸出數據

echo $output;


//時間轉換
function changetime($time){
    $arrtime = 0;
    if ($time == 1) {
        $arrtime = mktime (0,0,0,date("m")  ,date("d")-3,date("Y"));
    }elseif ($time = 2){
        $arrtime = mktime (0,0,0,date("m")  ,date("d")-15,date("Y"));
    }elseif ($time = 3){
        $arrtime = mktime (0,0,0,date("m")-1  ,date("d"),date("Y"));
    }elseif ($time = 4){
        $arrtime = mktime (0,0,0,date("m")-6  ,date("d"),date("Y"));
    }else{
        $arrtime = mktime (0,0,0,date("m")  ,date("d"),date("Y")-1);
    }
    return $arrtime;
}





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章