c# 商城条件筛选（多选）仿淘宝、京东。

刹那的菜鸟 2013-12-07 08:27:03
大神们来吧。 效果图还有前台代码，太长了 分2块。

不知道后台怎么写。 最好有示例代码 




<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<script language="javascript" type="text/javascript"> 

var applicationPath = "";

 var skinPath = "/templates/master/default";

            var subsiteuserId = "0";

        </script>

<meta http-equiv="content-language" content="zh-CN" />

<link rel="icon" type="image/x-icon" href="http://icudon.com/favicon.ico" media="screen" />

<link rel="shortcut icon" type="image/x-icon" href="http://icudon.com/favicon.ico" media="screen" />

<meta name="author" content="" />

<meta name="GENERATOR" content="" />



<title>新时尚</title>



<meta name="description" content="123" />

<meta name="keywords" content="123" />



<link href="http://icudon.com//templates/master/default/style/css.css" rel="stylesheet" type="text/css" />

<link href="http://icudon.com//templates/master/default/style/style.css" rel="stylesheet" type="text/css" />

<link href="http://icudon.com//templates/master/default/style/main.css" rel="stylesheet" type="text/css" />

<link href="http://icudon.com//templates/master/default/style/m18.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="/templates/master/default/style/pagevalidator.css" type="text/css" media="screen" />

<script src="http://icudon.com//utility/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="http://icudon.com//utility/jquery.cookie.js" type="text/javascript"></script>

<script src="http://icudon.com//utility/validate/pagevalidator.js" type="text/javascript"></script>

<script src="http://icudon.com//utility/globals.js" type="text/javascript"></script>

</head>



<body bgcolor="#c0c0c0">

<form name="aspnetForm" method="post" action="category-1.aspx?categoryId=1&valueStr=1_6-2_12" id="aspnetForm">



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['aspnetForm'];

if (!theForm) {

    theForm = document.aspnetForm;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>

<div class="cate_main">

<div class="category_r category_show">

	<div class="category_shaixuan" style="display:none;">

	<div class="category_shaixuan_c">

	<h2><img src="/templates/master/default/images/m18/category_shaixuan_t2.jpg" /></h2>

	<ul class="choose_pro_tab">

        <li>

<span style="margin-right:10px;"><a href='/browse/category-1.aspx'>新时尚 </a></span></li>

        </ul>

	</div>

	</div>

    <div class="core_blank8 "></div>

	<div class="category_shaixuan">

	<div class="category_shaixuan_c">

	<h2><img src="/templates/master/default/images/m18/category_shaixuan_t.jpg" /></h2> <div class="s_item clearfix">

    已选条件: <div class="lbl_condition">品牌：<em>新时尚</em>，<em>新时尚</em></div>

    <div class="lbl_condition">品牌：<em>新时尚</em></div>

  </div>

<style type="text/css">

.lbl_condition { background:#fff;border:1px solid #ccc; color: #666; display: inline-block; padding: 0 5px; margin-right: 5px;}

.lbl_condition em{ color:#E4393C; font-weight: bold; }

.category_show .choose_pro_tab li{ border-bottom: 1px dotted #CCC;}

.category_show .choose_pro_tab li a.openmulti{  display: block; float: right; border:1px solid #dfdfdf; background: #fff; border-radius: 2px; line-height: 18px; padding: 0 5px;height: 18px; font-size: 12px; text-decoration: none;} .category_show .choose_pro_tab li a.openmulti:hover{background-color: #efefef;}

.choose_pro_tab li div.multiselect{background: #efefef; border:1px solid #dfdfdf; width:685px;  padding: 15px; float: left;}

.choose_pro_tab li div.multiselect label{display: inline-block; margin-right: 8px;}

.choose_pro_tab li div.multiselect .multibtns{ text-align: center}

.choose_pro_tab li div.multiselect .multibtns .btn_submit,.choose_pro_tab li div.multiselect .multibtns .btn_cancel{ background:#0062a6; color: #fff; height: 22px; margin: 5px 8px; padding: 0 8px;  cursor: pointer; border:none;}

.choose_pro_tab li div.multiselect .multibtns .btn_cancel{background:#8b8b8b;}

</style>
...全文
380 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
金哲一 2015-07-02
  • 打赏
  • 举报
 回复
你有这个前台的html代码吗
刹那的菜鸟 2013-12-08
  • 打赏
  • 举报
 回复
引用 3 楼 sp1234 的回复:
你这个玩意儿无法“接地气”。它只有html，形成不了数据，因此没用。 比如说我选择了5、6个条件之后，你能组成一个足矣表达所选择的条件组合的json对象吗？
我看淘宝跟京东也差不多是用表单提交的吧？ 大神 有没有例子？你觉得用什么方式？
以专业开发人员为伍 2013-12-08
  • 打赏
  • 举报
 回复
你这个玩意儿无法“接地气”。它只有html，形成不了数据，因此没用。 比如说我选择了5、6个条件之后，你能组成一个足矣表达所选择的条件组合的json对象吗？
刹那的菜鸟 2013-12-08
  • 打赏
  • 举报
 回复
怎么没人啊。
刹那的菜鸟 2013-12-07
  • 打赏
  • 举报
 回复
剩下的； 

<ul class="choose_pro_tab">
        <li><label class="cate_search_namecss"><span>品牌：</span></label>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12" class="cate_search_selectcss">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12&brand=1">新时尚</a>
        </li>
        <li><label class="cate_search_namecss"><span>厂家：</span></label>
          <div class="singleselect">
            <a href="/browse/category-1.aspx?valueStr=1_0-2_12">全部</a>
            <a class="cate_search_selectcss">浩博特</a>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>品类：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_0">全部</a>
          <a class="cate_search_selectcss">PVC</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_9">壁布</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="class" value="1"> PVC</label>
            <label><input type="checkbox" name="class" value="2"> 壁布</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>工艺：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-3_0">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-3_25">纸面</a>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>风格：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-4_0">全部</a>
          <a class="cate_search_selectcss" href="/browse/category-1.aspx?valueStr=1_6-2_12-4_33">欧式风格</a>
          <a class="cate_search_selectcss" href="/browse/category-1.aspx?valueStr=1_6-2_12-4_31">现代风格</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-4_30">中式风格</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="style" value="1"> 欧式风格</label>
            <label><input type="checkbox" name="style" value="2"> 现代风格</label>
            <label><input type="checkbox" name="style" value="3"> 中式风格</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>价格区间：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-5_0">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-5_47">0-99</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-5_35">900-999</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="price" value="1"> 0-99</label>
            <label><input type="checkbox" name="price" value="2"> 900-999</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>用途：</span></label>
          <div class="singleselect">
          <a class="cate_search_selectcss" href="/browse/category-1.aspx?valueStr=1_6-2_12">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-6_61">卧室</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-6_55">走廊过道</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="price" value="1"> 0-99</label>
            <label><input type="checkbox" name="price" value="2"> 900-999</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>花型：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-7_0">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-7_74">大马士革</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-7_69">方格</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="pattern" value="1"> 大马士革</label>
            <label><input type="checkbox" name="pattern" value="2"> 方格</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        <li><label class="cate_search_namecss"><span>色系：</span></label>
          <div class="singleselect">
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-8_0">全部</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-8_84">红</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-8_77">白</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-8_76">黑</a>
          <a href="/browse/category-1.aspx?valueStr=1_6-2_12-8_75">灰</a>
          <a href="javascript:;" class="openmulti">+多选</a>
          </div>
          <div class="multiselect">
            <label><input type="checkbox" name="color" value="1"> 红</label>
            <label><input type="checkbox" name="color" value="2"> 白</label>
            <label><input type="checkbox" name="color" value="3"> 黑</label>
            <label><input type="checkbox" name="color" value="4"> 灰</label>
              <div class="multibtns">
                <input type="submit" class="btn_submit" value="确定" />
                <input type="button" class="btn_cancel" value="取消" />
              </div>
          </div>
        </li>
        </ul>
        <script type="text/javascript">
          $(document).ready(function () {
            $(".multiselect").hide();
            str = '';
            temp = '';
            $(".choose_pro_tab:eq(1) li").each(function(){
              label = $(this).find('.cate_search_namecss span').html();
              $seleted = $(this).find('.cate_search_selectcss');
              if($seleted.size()>0){
                temp = '';
                $seleted.each(function(){
                  temp+="<em>"+$(this).html()+"</em> ";
                })
                str += '<div class="lbl_condition">' + label + temp + '</div>';
              }
            })
            str = "已选条件:" + str;
            $(".s_item").html(str);


            $(".openmulti").click(function(){
              $parentLi=$(this).parents('li');
              $parentLi.find(".singleselect").hide();
              $parentLi.find(".multiselect").show();
            });
            $(".choose_pro_tab .btn_cancel").click(function(){
              $parentLi=$(this).parents('li');
              $parentLi.find(".multiselect").hide();
              $parentLi.find(".singleselect").show();
            });

          });
</script>
	</div>
	</div>

</form>
</body>
<!-- InstanceEnd --></html>
C# 实战项目——制作仿QQ软件
制作一个仿 QQ 的聊天软件 —— Q 友。通过本课程学习，你将学到以下知识点： 1、Form窗体关键属性、方法和事件的应用  2、如何触发窗体和控件的事件 3、ListView控件和ImageList组件...
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
仿淘宝京东多条件筛选可自行结合ajax加载，使用Jquery简单实现，具体如下，喜欢的朋友可以参考 复制代码代码如下:         Jquery分类      $(function () {  //品牌  var alink01 ...
数字货币/币币交易所系统开发|案例介绍|APP开发|项目测试
问了 京东零售，Timeline Timeline：投递：忘记了笔试：2.5/3一面：8.23二面：8.31HR面：9.1一面（30分钟）：1. 自我介绍2. 联合索引的问题，abc，什么时候会 #海康威视求职进展汇总(40442)# #海康威视求职进展汇总#...
android安卓源码海量项目合集打包-1
│ │ 标签的布局，流式标签，仿淘宝标签，可以直接使用，方便快捷.rar │ │ 流畅生动的3d卡片效果.zip │ │ 炫的3D标签云的效果，类似于各种播放器首页的字体悬浮效果.zip │ │ 高仿花田ios版标签移动效果....
iOS常用三方库、插件、知名技术博客、常用开发工具使用介绍等等（Objective-C版本）
- 仿网易新闻客户端，实现新闻浏览，视频播放，仿搜狐视频、百思不得姐等当前主流视频播放器，实现流媒体播放，自动监听屏幕转动，实现横屏播放 , 抓取百度图片，瀑布流显示，夜间模式，环信即时通讯. ECMobile_...
C#

110,536

社区成员

642,578

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章