<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %>

<!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 runat="server"> 
<title>Jquery分类</title> 
<script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//品牌 
var alink01 = $("#linktype01").find("span"); 
alink01.click(function () { 
alink01.each(function () { 
$(this).removeClass("templinkactive").addClass("templink"); 
}); 
$(this).removeClass("templink").addClass("templinkactive"); 
$("#Brand").val($(this).attr("tag")); 
})

//价格 
var alink02 = $("#linktype02").find("span"); 
alink02.click(function () { 
alink02.each(function () { 
$(this).removeClass("templinkactive").addClass("templink"); 
}); 
$(this).removeClass("templink").addClass("templinkactive"); 
$("#Price").val($(this).attr("tag")); 
})

//尺寸 
var alink03 = $("#linktype03").find("span"); 
alink03.click(function () { 
alink03.each(function () { 
$(this).removeClass("templinkactive").addClass("templink"); 
}); 
$(this).removeClass("templink").addClass("templinkactive"); 
$("#Size").val($(this).attr("tag")); 
SetPara(); 
}) 
});

function SetPara() { 
var a = $("#Brand").val(); 
var b = $("#Price").val(); 
var c = $("#Size").val(); 
alert("1.aspx?a=" + a + "&b=" + b + "&c=" + c); 
}; 
</script> 
<style type="text/css"> 
.templinkactive 
{ 
padding:5px; 
text-decoration:none; 
 
color:#ffffff; 
} 
.templink 
{ 
cursor:pointer; 
padding:5px; 
text-decoration:none; 
} 
table tr{ height:35px;} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<tr id="linktype01"> 
<td style="width:100px"> 
<b>笔记本品牌</b> 
</td> 
<td> 
<span class='templinkactive' tag="0">不限</span> 
</td> 
<td> 
<span class='templink' tag="100101">联想（Lenovo）</span> 
</td> 
<td> 
<span class='templink' tag="100102">宏碁（Acer）</span> 
</td> 
<td> 
<span class='templink' tag="100103">华硕（ASUS）</span> 
</td> 
<td> 
<span class='templink' tag="100104">戴尔（DELL）</span> 
</td> 
<td> 
<span class='templink' tag="100105">苹果（Apple）</span> 
</td> 
<td> 
<span class='templink' tag="100106">三星 （SAMSUNG）</span> 
</td> 
</tr> 
<tr id="linktype02"> 
<td style="width:100px"> 
<b>价格范围</b> 
</td> 
<td> 
<span class='templinkactive' tag="0">不限</span> 
</td> 
<td> 
<span class='templink' tag="100201">1000-2999</span> 
</td> 
<td> 
<span class='templink' tag="100202">3000-3499</span> 
</td> 
<td> 
<span class='templink' tag="100203">4000-4499</span> 
</td> 
<td> 
<span class='templink' tag="100204">5000-5999</span> 
</td> 
<td> 
<span class='templink' tag="100205">6000-6999</span> 
</td> 
<td> 
<span class='templink' tag="100206">7000及以上</span> 
</td> 
</tr> 
<tr id="linktype03"> 
<td style="width:100px"> 
<b>尺寸范围</b> 
</td> 
<td> 
<span class='templinkactive' tag="0" >不限</span> 
</td> 
<td> 
<span class='templink' tag="100301">8.9英寸及以下</span> 
</td> 
<td> 
<span class='templink' tag="100302">11英寸</span> 
</td> 
<td> 
<span class='templink' tag="100303">12英寸</span> 
</td> 
<td> 
<span class='templink' tag="100304">13英寸</span> 
</td> 
<td> 
<span class='templink' tag="100305">14英寸</span> 
</td> 
<td> 
<span class='templink' tag="100306">15英寸及以上</span> 
<input type="hidden" id="Brand" value="0" /> 
<input type="hidden" id="Price" value="0" /> 
<input type="hidden" id="Size" value="0" /> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html>

jquery + ajax 实现多条件查询的更多相关文章

  1. django项目中的ajax分页和条件查询。

    1,路由 #主页面路由 re_path('article/article_list/', article.article_list,name='article/article_list/'), #分页 ...

  2. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  3. jquery ajax 前前后后，所有的函数并查询链接

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  4. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  5. 继上篇-jquery ajax提交 本篇用ajax提交的数据去数据库查询

    上篇讲到如何用jquery ajax提交数据至后台,后台接收并返回给ajax.https://www.cnblogs.com/tiezhuxiong/p/11943328.html 今天我们把数据传到 ...

  6. dhtmlxGrid分页查询，条件查询实例

    使用jquery的ajax get将页面条件请求到后台,取得数据库数据,分页查询,返回前台grid中. 引入所需文件: <script>window.dhx_globalImgPath = ...

  7. Spring Mvc模式下Jquery Ajax 与后台交互操作

    1.基本代码 1)后台控制器基本代码 @Controller @RequestMapping("/user") public class UserController { @Aut ...

  8. ThinkPHP中 按条件查询后列表显示

    最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据,然后进行列表显示的问题. 在ThinkPHP中进行列表显示的传统过程:通过在后台控制器中查询出数据,然后通过$this->assign ...

  9. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

随机推荐

  1. Linux登录自动切换root账户与历史命令优化

    1:当我们Linux系统优化完成,会使用oldboy用户远程连接CRT登录,每次连接都需要使用sudo su - 或者su - 输入密码登录,请问如何在CRT连接的时候自动的切换到root账户,(提示 ...

  2. asp.net mvc 中使用单例

    有这样一个service,需要运行的asp.net站点上,但要保证这个实例是唯一的.单例用来启用聊天机器人,保证唯一,以免启动多个,造成客户端发送消息的时候,会造成每个机器人都发送消息,app收到多条 ...

  3. oracle sql 超长报ORA-01460错误

    程序查找数据的时候报错了: ORA-01460: 转换请求无法实施或不合理 这是什么鬼?不合理你就提嘛,报错干什么. 程序原本好好的,现在突然报错了.数据库并没有什么更改. 后来猜测是因为执行的SQL ...

  4. VS类添加头文件注释

    VS2015参考: http://blog.csdn.net/qq395537505/article/details/50853546  修改两个文件,详细信息 VS2010: 找到VS的安装目录 E ...

  5. C从控制台(stdin)输入带空格的字符串到字符数组中

    用scanf("%s",array); 的话遇到空格就停止接收后面的字符了,那怎么才能接收带空格的字符串呢? 1.用 gets() ,它可以接收带空格的字符串, 直到回车才结束输入 ...

  6. http的session和cookie

    1 http session和http请求之间的关系 http协议是无状态的,一次会话服务端需要处理多次http请求,就算是长连接,也是要发送多次请求的,由于http无状态所有每次的请求都是独立的,服 ...

  7. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

  8. ie7 总结

    1 ie7 对部分属性选择器严重区分大小写 在HTML中,属性名,例如id, title之类是不区分大小写的,CSS中的选择器也应该是如此.但是IE7对属性名是严格区分大小写的! 2 关于属性选择器, ...

  9. bzoj 4318: OSU!【期望dp】

    思路有点眼熟啊,就是设l1记录长为x的极长全1串贡献x的答案,l2记录长为x的极长全1串贡献x^2的答案,f记录真正的答案 转移的话根据n-(n-1)=1,n^2-(n-1)^2=2n-1,n^3-( ...

  10. bzoj 4540: [Hnoi2016]序列【单调栈+线段树】

    强烈安利:http://blog.csdn.net/qq_34637390/article/details/51313126 这篇讲标记讲的非常好,这个标记非常神奇-- 首先last表示扫描到last ...