jquery + ajax 实现多条件查询
<%@ 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 实现多条件查询的更多相关文章
- django项目中的ajax分页和条件查询。
1,路由 #主页面路由 re_path('article/article_list/', article.article_list,name='article/article_list/'), #分页 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- jquery ajax 前前后后，所有的函数并查询链接
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- 继上篇-jquery ajax提交 本篇用ajax提交的数据去数据库查询
上篇讲到如何用jquery ajax提交数据至后台,后台接收并返回给ajax.https://www.cnblogs.com/tiezhuxiong/p/11943328.html 今天我们把数据传到 ...
- dhtmlxGrid分页查询，条件查询实例
使用jquery的ajax get将页面条件请求到后台,取得数据库数据,分页查询,返回前台grid中. 引入所需文件: <script>window.dhx_globalImgPath = ...
- Spring Mvc模式下Jquery Ajax 与后台交互操作
1.基本代码 1)后台控制器基本代码 @Controller @RequestMapping("/user") public class UserController { @Aut ...
- ThinkPHP中 按条件查询后列表显示
最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据,然后进行列表显示的问题. 在ThinkPHP中进行列表显示的传统过程:通过在后台控制器中查询出数据,然后通过$this->assign ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
随机推荐
- POJ3264Balanced Lineup（最基础的线段树）
採用一维数组建树. (由于一维数组建的是全然二叉树,时间上比用孩子节点指针建树慢.只是基本能够忽略=-=) #include<iostream> #include<cstdio> ...
- 各种“GND”
资料来自网上,把个人觉得靠谱的摘取下来 1.地分类: a)直流地:直流电路“地”,零电位参考点: b)交流地:交流电的零线.要与地线区别开,不过,有时候拉电入户之前会把地线和零线接在一起: c)功率地 ...
- com.squareup.timessquare.CalendarPickerView
com.squareup.timessquare.CalendarPickerView https://github.com/square/android-times-square
- vsCode 常用快捷键（mac 版）
光标多行显示: commond+Alt+topArrow/downArrow 查找:commond+F 查找并按顺序切换下一个:commond+G 跳转到某一行: ctrl+G 输入行号跳转 跳转到某 ...
- 在VC6.0中多线程编程演示样例（带同步信号量）
直接上代码: #include <windows.h>//必要的头文件,使用Windows API函数 #include <stdio.h> int index = 0; in ...
- 【iOS系列】-UIScrollView的介绍及结合UIPageControl实现图片播放的实例
[iOS系列]-UIScrollView的介绍及结合UIPageControl实现图片播放的实例 第一:UIScrollView的常用属性 //表示UIScrollView内容的尺寸,滚动范围 @pr ...
- git 如何让单个文件回退到指定的版本【转】
本文转载自:http://blog.csdn.net/ikscher/article/details/43851643 1.进入到文件所在文件目录,或者能找到文件的路径查看文件的修改记录 1 $ gi ...
- UVA10600 ACM Contest and Blackout —— 次小生成树
题目链接:https://vjudge.net/problem/UVA-10600 In order to prepare the “The First National ACM School Con ...
- YTU 1098: The 3n + 1 problem
1098: The 3n + 1 problem 时间限制: 1 Sec 内存限制: 64 MB 提交: 368 解决: 148 题目描述 Consider the following algor ...
- 蓝牙4.0 BLE 广播包解析
在使用EN-Dongle捕获和解析广播包之前,我们先了解一下BLE报文的结构,之后,再对捕获的广播包进行分析.在学习BLE的时候,下面两个文档是极其重要的,这是SIG发布的蓝牙的核心协议和核心协议增补 ...