实现类似的效果（如图）。

landySS 2011-07-26 08:50:22

实现类似的效果，大家给个思路，有示例更好。

...全文

184 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

landySS 2011-07-26

打赏
举报

我很少做网站，用datelist做了一个超难看。
功能要求：
要动态的。选择第一层，第二层跟着变。选择第二层，第三层跟着变。
1. 上面有人说用用DetailView + Repeater，能实现我说的功能？我真么用过，能给个简单的实例吗？

2. 用Repeater，我怎么实现级联效果？选择第一层，第二层跟着变。选择第二层，第三层跟着变。代码要写哪？

3. Repeater 中的linkbutton 怎么让他长度不够时，可以整个控件换行？
现在是
linkbutton1 linkbutton2 linkbutton3 linkbutton4 linkbutton5 linkb
utton6 linkbutton7
我想要
linkbutton1 linkbutton2 linkbutton3 linkbutton4 linkbutton5 [这里空着]
linkbutton6 linkbutton7

x363961461 2011-07-26

打赏
举报

拿着静态效果图，拼出来也没啥难的。

快乐的小二兔 2011-07-26

打赏
举报

琐碎。。。。
要判断当前路径什么什么的烦人的很。。

landySS 2011-07-26

打赏
举报

[Quote=引用 3 楼 fangxinggood 的回复:]
DetailView + Repeater
[/Quote]
我很少做网站，用Repeater我知道，可是DetailView，他们怎么合着用，能实现我说的功能？
能给个简单的实例吗？

landySS 2011-07-26

打赏
举报

我很少用Repeater。问题有点傻
用Repeater，我怎么实现级联效果。选择第一层，第二层跟着变。选择第二层，第三层跟着变。

landySS 2011-07-26

打赏
举报

Repeater 中的linkbutton 怎么让他长度不够时，可以整个控件换行。

现在是
linkbutton1 linkbutton2 linkbutton3 linkbutton4 linkbutton5 linkb
utton6 linkbutton7

我想要
linkbutton1 linkbutton2 linkbutton3 linkbutton4 linkbutton5 [这里空着]
linkbutton6 linkbutton7

lisweden 2011-07-26

打赏
举报

[Quote=引用 4 楼 hch126163 的回复:]

原理简单：
一个简单例子：（保存为 *.htm）可以看到效果
HTML code

<!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.or……
[/Quote]
+ 可以根据这个完善一下就可以了

chenhongjun0624 2011-07-26

打赏
举报

[Quote=引用 3 楼 fangxinggood 的回复:]

DetailView + Repeater
[/Quote]
+1

hch126163 2011-07-26

打赏
举报

原理简单：
一个简单例子：（保存为 *.htm）可以看到效果



<!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">

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

    <title></title>  

   <style type="text/css">

   *{ margin:0; padding:0; font-size:13px;}

    body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}

    dd div a{margin-left:10px;}

    a:link {color: #000;text-decoration: none;}

    a:visited {color: #666;text-decoration: none;}

    a:hover {text-decoration: none;color: #F00;	}

    a:active {text-decoration: none;}

    #current{background:blue; color:red;}

   </style>

   </head>

<body>

<div  style="width:600px; height:auto; margin:50px auto; border:1px solid #ddd; padding:10px;">

<h1>笔记本</h1><strong> - 商品筛选</strong>

<div id="select" >

    <dl >

        <dt>品牌：</dt>

        <dd>

            <div>

                <a>全部</a>

                <a>联想（ThinkPad）</a>

                <a>联想（Lenovo）</a>

                <a>惠普（hp）</a>

                <a>宏碁（acer）</a>

            </div>

        </dd>

        

        <dt>价格：</dt>

        <dd>

            <div>

                <a>全部</a>

                <a>3000-3999</a>

                <a>4000-4999</a>

                <a>5000-5999</a>

                <a>6000-6999</a>

            </div>

        </dd>

        

        <dt>尺寸：</dt>

        <dd>

            <div>

                <a>全部</a>

                <a>11英寸</a>

                <a>12英寸</a>

               <a>14英寸</a>

                <a>15英寸</a>

            </div>

        </dd>

    </dl>

</div>

</div>              

</body>

<script type="text/javascript">

window.onload=function()

{

   var divSelect = document.getElementById("select");

   var  ddList = divSelect.getElementsByTagName("dd");

   var aList=[] ; 

   var url = document.location.href;

   var index = url.indexOf("?p=");

   var fileName= (index>0 ? url.substring(0,index):url) +"?p="; //"多条件搜索显示效果.htm?p="; // 当前相对url + "p="

   var p ;

   if(index>0){p=url.substr(index+3); }

   p= p? p.split('-'):[0,0,0];

   

   for(var i=0;i< ddList.length;i++)

    {

       aList.push( ddList[i].getElementsByTagName("a"));

       aList[i][p[i]?p[i]:0].id="current";

     

    } 

    for(var i=0;i< aList[0].length;i++) // 品牌 链接

    {

       aList[0][i].href = fileName + i +'-'+ (p[1]?p[1]:0)+'-'+ (p[2]?p[2]:0);

    }

      for(var i=0;i< aList[1].length;i++) // 价格 链接

    {

       aList[1][i].href = fileName + (p[0]?p[0]:0)+'-'+ i +'-'+ (p[2]?p[2]:0);

    }

      for(var i=0;i< aList[2].length;i++) // 尺寸 链接

    {

       aList[2][i].href = fileName +(p[0]?p[0]:0)+'-'+ (p[1]?p[1]:0)+'-'+ i  ;

    }

    

}

</script>  

</html>