<%@ 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. 一个Exchange 2010 的password不定期弹框的问题处理，希望对大家可以有所帮助。

    前期有个客户採用exchange 2010的邮件系统作为他们的邮件平台.有个奇怪的现象就是Exchange 2010 系统会出现不定期"宕机"现象,为何打上引號,就是这个时候仅仅有 ...

  2. linux远程管理工具：putty

    使用QTP测试文件上传和目录做成是否成功,必须先将文件和目录下载到本地,再作比较.现在下载工具众多,其中putty是最出色的一个,支持linux服务器,这点很重要“免费的”.下面就让我们来看一下吧! ...

  3. 分享：APK高级保护方法解析（三）

    刷朋友圈.玩游戏.看新闻,智能手机正在以我们无法想象的速度飞快发展,可是随之而来的安全问题也越来越引人关注,APP二次打包.反编译.盗版的现象屡见不鲜.因此须要对APK进行加固保护. 眼下市面上常见的 ...

  4. c++中拷贝构造函数，浅拷贝和深拷贝的区别

    在C++提供了一种特殊的构造函数,称为拷贝构造函数.拷贝构造函数具有一般构造函数的所有特性,其作用是使用一个已经存在的对象(由拷贝构造函数的参数指定的对象)去初始化一个新的同类对象,即完成本类对象的复 ...

  5. 6 使用Ionic开发天气应用

    简介:本节课我们会制作一款天气应用,这款应用允许用户查看当前的天气情况.天气预报以及地点收藏,在模态框内显示日出和日落的数据,使用分页滚动面板显示天气信息,使用侧滑菜单实现导航. 6.1 项目配置 环 ...

  6. Django的缓存,序列化,ORM操作的性能

    1,缓存:把数据先保存在某个地方,下次再读取的时候不用再去原位置读取

  7. myeclipse包的层数和package的层数不一致

    复制别人的工程的时候常常遇到包的层数不一致的情况 如下图 其实com.weibo.happpy.dao的上面还有一层java包,但是代码里没有写java....... 可以通过如下方式修改工程:

  8. jfreechart应用3--饼状图 学习（作者：百度 被风吹过的日子）

    jfreechart应用3--饼状图 三． 饼图 在WebRoot目录下建立名为pie的子目录,用来存放本教程中饼图的实例jsp页面.下面让我们来看一个简单的三维饼图.首先在pie目录下建立一个名为s ...

  9. windows系统修改mysql端口的方法

    1.首先在控制面板--管理工具--服务里停止mysql服务

  10. 单纯形 BZOJ3112: [Zjoi2013]防守战线

    题面自己上网查. 学了一下单纯形.当然 证明什么的 显然是没去学.不然估计就要残废了 上学期已经了解了 什么叫标准型. 听起来高大上 其实没什么 就是加入好多松弛变量+各种*(-1),使得最后成为一般 ...