关于jquery多条件筛获取值的问题

<!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>
    <title>多条件筛选</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        //获取URL参数
        function getQueryStringRegExp(name) {
            var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
            if (reg.test(location.href)) return decodeURI(RegExp.$2.replace(/\+/g, " ")); return "";
        };
        //加载页面时由URL参数为条件给对应标签添加样式
        function Load(cssid, url) {
            $(".conleft #" + cssid + " a").each(function () {
                var s = $(this).text();
                if (!url) {
                    if ($(this).text() == "全部")
                        $(this).attr("class", "red");
                }
                else if (url == s) {
                    $(this).attr("class", "red");
                    return false;
                }
            });
        };
        //拼接参数字符串
        function GetUrl() {
            var url = "";
            var type = $("#type a[class='red']").text();
            var name = $("#name a[class='red']").text();
            var sex = $("#sex a[class='red']").text();
            url = "?type=" + encodeURI(type) + "&name=" + encodeURI(name) + "&sex=" + encodeURI(sex);
            return url;
        }
        $(document).ready(function () {
            var stype = getQueryStringRegExp('type');
            var sname = getQueryStringRegExp('name');
            var sex = getQueryStringRegExp('sex');
            //$(".conleft dt+dd a").attr("class", "red"); 
            Load("type", stype);
            Load("name", sname);
            Load("sex", sex);
            $(".conleft a").click(function () {
                $(this).parents("dl").children("dd").each(function () {
                    $(this).find("a").removeClass("red");
                });                $(this).attr("class", "red");
                location.href = GetUrl();
            });
        });        
    </script>
    <style type="text/css">
        .red
        {
            color: #ff0000;
        }
        .conleft dl
        {
            float: left;
            width: 200px;
            margin-left: 15px;
            display: inline;
            margin-top: 15px;
        }
        .conleft dl dt
        {
            color: #666;
            font-weight: normal;
        }
        .conleft dl dd
        {
            float: left;
            margin-top: 5px;
            line-height: 23px;
        }
        .conleft dl dd a
        {
            margin-right: 15px;
        }
        .conleft dl dd b
        {
            color: #DB0000;
        }
    </style>
</head>
<body>
    <div class="conleft">
        <dl id="type">
            <dt>品牌：</dt>
            <dd>
                <a>全部</a> <a name="hp">惠普(hp)</a> <a>联想(Lenovo)</a> <a>联想(ThinkPad)</a> <a>宏基(acer)</a> <a>华硕</a>
                <a>戴尔</a> <a>三星</a> <a>索尼</a> <a>东芝</a> <a>Gateway</a> <a>微星</a> <a>海尔</a> <a>清华同方</a>
                <a>富士通</a> <a>苹果(Apple)</a> <a>神舟</a> <a>方正</a> <a>优雅</a><a>常香玉</a>
            </dd>
        </dl>
        <dl id="name">
            <dt>价格：</dt>
            <dd>
                <a>全部</a> <a>1000-2999</a> <a>3000-3499</a> <a>3500-3999</a> <a>4000-4499</a> <a>4500-4999</a>
            </dd>
        </dl>
        <dl id="sex">
            <dt>尺寸：</dt>
            <dd>
                <a>全部</a> <a>8.9英寸及以下</a> <a>11英寸</a> <a>12英寸</a> <a>13英寸</a> <a>14英寸</a> <a>15英寸</a>
                <a>16英寸-17英寸</a>
            </dd>
        </dl>
    </div>
</body>
</html>
选中：华硕 1000-2999 11英寸 url地址：?type=华硕&name=1000-2999&sex=11英寸
我想把地址转换成：?type=huashuo&name=1000_2999&sex=11yingchun
该怎么对选择条件进行定义？

解决方案 »

  1.   

    保存为 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:#ddd; color:red;}
       </style>
       </head>
    <body>
    <div  style="width:600px; height:auto; margin:50px auto; border:1px solid #ddd; padding:10px;">
    <h1>笔记本</h1><strong>&nbsp;-&nbsp;商品筛选</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>