<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AJAX.NET控件之ModalPopup </title>
<style type="text/css">
.fenl{
color: #FF7003;
text-decoration: none;
display: block;
border: 1px solid #FFFFFF;
}
.fenl2{
text-decoration: none;
background-color: #FFECCC;
border: 1px solid #FF9900;
color: #006600;
}
#fenl {
line-height: 150%;
padding: 0px;
}
#fenl li {
width: 60px;
display: block;
float: left;
text-align: center;
list-style-type: none;
}
#fenl ul {
margin: 3px;
clear: both;
height: 28px;
border: 1px dashed #F8CD98;
padding: 3px;
}
#fenl a {
color: #FF7003;
text-decoration: none;
display: block;
border: 1px solid #FFFFFF;
}
#fenl a:hover {
text-decoration: none;
background-color: #FFECCC;
border: 1px solid #FF9900;
color: #006600;
}
</style> <script>
var td1;
function show(obj){ var p = obj.parentNode.childNodes;
for(var i=0;i <p.length;i++){
p[i].className ='fenl';
}
obj.className='fenl2'; }
</script>
<script type="text/javascript">
function onclicke()
{
var obj1=document.getElementsByTagName("li");
for(var i=0;i <obj1.length;i++)
{
obj1[i].onclick=function()
{
alert(this.innerText);
}
}
} </head>
<body style="text-align: center">
<form id="form1" runat="server">
<div id="fenl">
<ul>
<li style="width: 80px; font-weight: bold">按商品类别: </li>
<li onclick='show(this)' id="li3_1"> <a href='#'>上衣 </a> </li>
<li onclick='show(this)' id="li3_2"> <a href='#'>裤子 </a> </li>
<li onclick='show(this)' id="li3_3"> <a href='#'>职业装 </a> </li>
<li onclick='show(this)' id="li3_4"> <a href='#'>休闲装 </a> </li>
<li onclick='show(this)' id="li3_5"> <a href='#'>鞋帽 </a> </li>
<li onclick='show(this)' id="li3_6"> <a href='#'>其它 </a> </li>
</ul>
<ul>
<li style="width: 80px; font-weight: bold">按商品品牌: </li>
<li onclick='show(this)' id="li1_1"> <a href='#'>派克 </a> </li>
<li onclick='show(this)' id="li1_2"> <a href='#'>韩国国SZ </a> </li>
<li onclick='show(this)' id="li1_3"> <a href='#'>花园街 </a> </li>
<li onclick='show(this)' id="li1_4"> <a href='#'>与狼花舞 </a> </li>
<li onclick='show(this)' id="li1_5"> <a href='#'>IBM </a> </li>
</ul>
<ul>
<li style="width: 80px; font-weight: bold">按商品价格: </li>
<li onclick='show(this)' id="li2_1"> <a href="#">50以下 </a> </li>
<li onclick='show(this)' id="li2_2"> <a href="#">50-100 </a> </li>
</ul>
</div>
</form>
</body>
</html>
刚打开页面的时候显示出所有这类商品的信息
点击“上衣”的时候,先判断下面两项有没有选中,如果没有datalist显示所有上衣的信息。
点击"与狼花舞"也是一样先判断其它两项有没有选中,如果选中就加以条件查询,如果没有就查询出这个品牌的所有信息.
如果三项都有选中就查询,,,,,select * from 商品表 where 商品类别=选中的商品类型 and 品牌=选中的品牌 and 价格=选中的价格如果只选了上衣就查select * from 商品表 where 商品类别=选中的商品类型如果只选了品牌就查 select * from 商品表 where 品牌=选中的品牌在线等,急==========================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AJAX.NET控件之ModalPopup </title>
<style type="text/css">
.fenl{
color: #FF7003;
text-decoration: none;
display: block;
border: 1px solid #FFFFFF;
}
.fenl2{
text-decoration: none;
background-color: #FFECCC;
border: 1px solid #FF9900;
color: #006600;
}
#fenl {
line-height: 150%;
padding: 0px;
}
#fenl li {
width: 60px;
display: block;
float: left;
text-align: center;
list-style-type: none;
}
#fenl ul {
margin: 3px;
clear: both;
height: 28px;
border: 1px dashed #F8CD98;
padding: 3px;
}
#fenl a {
color: #FF7003;
text-decoration: none;
display: block;
border: 1px solid #FFFFFF;
}
#fenl a:hover {
text-decoration: none;
background-color: #FFECCC;
border: 1px solid #FF9900;
color: #006600;
}
</style> <script>
var td1;
function show(obj){ var p = obj.parentNode.childNodes;
for(var i=0;i <p.length;i++){
p[i].className ='fenl';
}
obj.className='fenl2'; }
</script>
<script type="text/javascript">
function onclicke()
{
var obj1=document.getElementsByTagName("li");
for(var i=0;i <obj1.length;i++)
{
obj1[i].onclick=function()
{
alert(this.innerText);
}
}
} </head>
<body style="text-align: center">
<form id="form1" runat="server">
<div id="fenl">
<ul>
<li style="width: 80px; font-weight: bold">按商品类别: </li>
<li onclick='show(this)' id="li3_1"> <a href='#'>上衣 </a> </li>
<li onclick='show(this)' id="li3_2"> <a href='#'>裤子 </a> </li>
<li onclick='show(this)' id="li3_3"> <a href='#'>职业装 </a> </li>
<li onclick='show(this)' id="li3_4"> <a href='#'>休闲装 </a> </li>
<li onclick='show(this)' id="li3_5"> <a href='#'>鞋帽 </a> </li>
<li onclick='show(this)' id="li3_6"> <a href='#'>其它 </a> </li>
</ul>
<ul>
<li style="width: 80px; font-weight: bold">按商品品牌: </li>
<li onclick='show(this)' id="li1_1"> <a href='#'>派克 </a> </li>
<li onclick='show(this)' id="li1_2"> <a href='#'>韩国国SZ </a> </li>
<li onclick='show(this)' id="li1_3"> <a href='#'>花园街 </a> </li>
<li onclick='show(this)' id="li1_4"> <a href='#'>与狼花舞 </a> </li>
<li onclick='show(this)' id="li1_5"> <a href='#'>IBM </a> </li>
</ul>
<ul>
<li style="width: 80px; font-weight: bold">按商品价格: </li>
<li onclick='show(this)' id="li2_1"> <a href="#">50以下 </a> </li>
<li onclick='show(this)' id="li2_2"> <a href="#">50-100 </a> </li>
</ul>
</div>
</form>
</body>
</html>
刚打开页面的时候显示出所有这类商品的信息
点击“上衣”的时候,先判断下面两项有没有选中,如果没有datalist显示所有上衣的信息。
点击"与狼花舞"也是一样先判断其它两项有没有选中,如果选中就加以条件查询,如果没有就查询出这个品牌的所有信息.
如果三项都有选中就查询,,,,,select * from 商品表 where 商品类别=选中的商品类型 and 品牌=选中的品牌 and 价格=选中的价格如果只选了上衣就查select * from 商品表 where 商品类别=选中的商品类型如果只选了品牌就查 select * from 商品表 where 品牌=选中的品牌在线等,急==========================================
show(this)里给hidden赋值
----------------------------------------------------
<input type="hidden" id="LB" runat="server"/>
<input type="hidden" id="PP" runat="server"/>
<input type="hidden" id="JG" runat="server"/>赋值后判断hidden的值是否=""
等于就不加where 条件
不等于就加对应的是类别还是品牌或是价格的条件
应该容易判断出来呀..
比如hidden1代表的商品类别的值,选了就拿到值,没选就为空
....
这样下去。三个hidden分别代表三个条件。再执行查询。不行吗?
var a,b,c
然后,在点击这三个选项的时候,分别为此三个变量赋值,
假如点击了选项1,则a=xxx
假如又了点击了选项2,则b=xxx每次点击的时候,都向后台传递参数
var url = "xxx.aspx?a=" + a + "&b=" + b + "&c=" + c;
如此,不管点击了什么,你总是向后台传递3个参数,虽然这三个参数不一定都全部有值,达到你的目的了.