这样的js还是ajax怎么写啊？？

jquery，js都不懂就是难啊，简单就帮下我呗！

无聊，粗略的写了下。仿的是商城购物是选择产品的相关规格参数时的效果
<!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>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>LZ你应该是做类似商城购物时的环节吧？</title>
<style type="text/css">
     body{margin-top:20px;}
    .shop{float:left;width:500px;}
    .shop ul{ list-style:none;width:100%;float:left;margin-top:-15px;_margin-top:-5px;}
    .shop li{ list-style:none;float:left;width:80px; cursor:pointer;margin-top:5px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .color{width:50px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .select{border:2px solid red}
    .shop .hide{display:none;}
    .shop .show{display:block;}
    span{width:50px;height:20px;border:1px solid red}
</style>
<script language="javascript" type="text/javascript">
var data={
        "黑色":[["A","B","C","X"],["1元","2元","3元","4元"],["1件","2件","3件","4件"]],
        "红色":[["D","E","F","E","F"],["4元","5元","6元","5元","6元"],["4件","5件","6件","5件","6件"]],
        "绿色":[["G","H","I"],["7元","8元","9元"],["7件","8件","9件"]]
    };
    /*
    index:当前颜色序号
    count:当前颜色值
    */
    function showColor(index,color)
    {
        var count=data[color][0].length;//取款式总长度
        for(n=0;n<count;n++)
        {
            if(document.getElementById("style"+n)){
                document.getElementById("color_"+n).className=n==index?'color select':'color';//设置颜色的边框颜色
                document.getElementById("style"+n).className=n==index?'show':'hide';//设置颜色下的款式容器是否显示
                document.getElementById("style_"+n+"").className=n==index?'show':'hide';//设置颜色下的款式价格和库存容器是否显示
                for(l=0;l<count;l++)
                {
                    if(document.getElementById("style_"+n+"_"+l)){
                        document.getElementById("style_"+n+"_"+l).className='show';
                        document.getElementById("price_"+n+"_"+l).className='hide';
                        document.getElementById("storage_"+n+"_"+l).className='hide';
                    }
                }
            }        }
    }
    /*
    m:当前颜色
    index:当前款式
    count:款式总数
    */
    function showStyle(m,index,count)
    {
        var o=document.getElementById("style"+m).getElementsByTagName("li");
        for(k=0;k<o.length;k++)
        {
            document.getElementById("style_"+m+"_"+k).className=index==k?'show select':'show';
        }
        for(n=0;n<count;n++)
        {
            document.getElementById("price_"+m+"_"+n).className=index==n?'show':'hide';
            document.getElementById("storage_"+m+"_"+n).className=index==n?'show':'hide';
       }
    }
window.onload=function(){
    var _html='<div class="shop">{color}';
    var _color='<ul>';
    var m=0;
    for(i in data)
    {
        _color+='<li class="color" id="color_'+m+'" onclick="showColor('+m+',\''+i+'\')">'+i+'</li>';
        _html+='<ul id="style'+m+'" class="hide">';
        var Attr=data[i];
        for(j=0;j<Attr.length;j++)
        {

            for(k=0;k<Attr[j].length;k++)
            {
                var _onclick=j==0?' onclick=showStyle('+m+','+k+','+Attr[j].length+')':'';
                var _txt;
                var _id;
                switch(j)
                {
                    case 0:
                        _id="style_"+m+"_"+k;
                        _txt='款式';
                        break;
                    case 1:
                        _id="price_"+m+"_"+k;
                        _txt='价格：';
                        break;
                    case 2:
                        _id="storage_"+m+"_"+k;
                        _txt='库存：';
                        break;
                }
                _html+='<li '+_onclick+' id="'+_id+'">'+_txt+''+Attr[j][k]+'</li>';
                if(k==Attr[j].length-1 && j==0){_html+='</ul><ul id="style_'+m+'" class="hide">'; }
            }

        }
        _html+='</ul>';
        m++;
    }
    _color+='</ul>';
    _html+='</div>';
    _html=_html.replace("{color}",_color)
    document.body.innerHTML=_html;
}</script>
</head>
<body></body>
</html>

1：
<body>
<div id="price"></div> <div id="storage"></div>
</body>2：window.onload最后一行的
document.body.innerHTML=_html;
修改成：
document.body.innerHTML=_html+document.body.innerHTML;3：showStyle函数修改成为
function showStyle(m,index,count)
    {
        var o=document.getElementById("style"+m).getElementsByTagName("li");
        for(k=0;k<o.length;k++)
        {
            document.getElementById("style_"+m+"_"+k).className=index==k?'show select':'show';
        }
        document.getElementById("price").innerHTML=document.getElementById("price_"+m+"_"+index).innerHTML;
        document.getElementById("storage").innerHTML=document.getElementById("storage_"+m+"_"+index).innerHTML;
    }

根据你的要求可以简化如下：
<!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>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>应该是商城的下订吧</title>
<style type="text/css">
     body{margin-top:20px;}
    .shop{float:left;width:500px;}
    .shop ul{ list-style:none;width:100%;float:left;margin-top:-15px;_margin-top:-5px;}
    .shop li{ list-style:none;float:left;width:80px; cursor:pointer;margin-top:5px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .color{width:50px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .select{border:2px solid red}
    .shop .hide{display:none;}
    .shop .show{display:block;}
    span{width:50px;height:20px;border:1px solid red}
</style>
<script language="javascript" type="text/javascript">
var data={
        "黑色":[["A","B","C","X"],["11元","21元","3元","4元"],["11件","21件","3件","4件"]],
        "红色":[["D","E","F","E","F"],["4元","5元","6元","5元","6元"],["4件","5件","6件","5件","6件"]],
        "绿色":[["G","H","I"],["7元","8元","9元"],["7件","8件","9件"]]
    };
    /*
    color:当前颜色值
    index:当前颜色序号
    */
    function showColor(color,index)
    {
        var count=data[color][0].length;//取款式总长度
        for(n=0;n<count;n++)
        {
            if(document.getElementById("style"+n)){
                document.getElementById("color_"+n).className=n==index?'color select':'color';//设置颜色的边框颜色
                document.getElementById("style"+n).className=n==index?'show':'hide';//设置颜色下的款式容器是否显示

            }
            for(l=0;l<count;l++)
                {
                    if(document.getElementById("style_"+n+"_"+l)){
                        document.getElementById("style_"+n+"_"+l).className='show';
                    }
                }
        }
    }
    /*
    color:颜色值[黑色,红色,绿色]
    m:当前颜色序号
    index:当前款式序号
    */
    function showStyle(color,m,index)
    {
        var o=document.getElementById("style"+m).getElementsByTagName("li");
        for(k=0;k<o.length;k++)
        {
            document.getElementById("style_"+m+"_"+k).className=index==k?'show select':'show';
        }
        document.getElementById("price").innerHTML=data[color][1][index];
        document.getElementById("storage").innerHTML=data[color][2][index];
    }    /*
        color:颜色值
        m:颜色序号
        style:当前颜色下所有款式
    */
    function getStyle(color,m,style){
        var _style='<ul id="style'+m+'" class="hide">';
        for(i=0;i<style.length;i++)
        {
            var _onclick='onclick="showStyle(\''+color+'\','+m+','+i+')"';
            var _id="style_"+m+"_"+i;
            _style+='<li '+_onclick+' id="'+_id+'">款式'+style[i]+'</li>';
        }
        _style+='</ul>';
        return _style;
    }
window.onload=function(){
    var _color='<ul>';
    var _style='';
    var m=0;
    for(i in data)
    {
        _color+='<li class="color" id="color_'+m+'" onclick="showColor(\''+i+'\','+m+')">'+i+'</li>';
        _style+=getStyle(i,m,data[i][0])
        m++;
    }
    _color+='</ul>';
    document.getElementById("shop").innerHTML=_color+_style;
}</script>
</head>
<body>
<div id="shop" class="shop"></div>
<div id="price"></div> <div id="storage"></div>
</body>
</html>

根据你私信里的要求，修改如下：
<!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>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>应该是商城的选购参数吧</title>
<style type="text/css">
     body{margin-top:20px;}
    .shop{float:left;width:500px;}
    .shop ul{ list-style:none;width:100%;float:left;margin-top:-15px;_margin-top:-5px;}
    .shop li{ list-style:none;float:left;width:80px; cursor:pointer;margin-top:5px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .color{width:50px;height:30px;line-height:30px;text-align:center;margin-left:5px; border:1px solid #bfbfbf;}
    .shop .select{border:2px solid red}
    .shop .hide{display:none;}
    .shop .show{display:block;}
    span{width:50px;height:20px;border:1px solid red}
</style>
<script language="javascript" type="text/javascript">
var data={
        "黑色":[["A","B","C","X"],["11元","21元","3元","4元"],["11件","21件","3件","4件"]],
        "红色":[["D","E","F","E","F"],["4元","5元","6元","5元","6元"],["4件","5件","6件","5件","6件"]],
        "绿色":[["G","H","I"],["7元","8元","9元"],["7件","8件","9件"]]
    };
    /*
    color:当前颜色值
    index:当前颜色序号
    */
    function showColor(color,index)
    {
        //清空所有之前显示的价格，库存，当前已选项
        document.getElementById("price").innerHTML='';
        document.getElementById("storage").innerHTML='';
        document.getElementById("xianshi").innerHTML='';
        var count=data[color][0].length;//取款式总长度
        for(n=0;n<count;n++)
        {
            if(document.getElementById("style"+n)){
                document.getElementById("color_"+n).className=n==index?'color select':'color';//设置颜色的边框颜色
                document.getElementById("style"+n).className=n==index?'show':'hide';//设置颜色下的款式容器是否显示

            }
            for(l=0;l<count;l++)
                {
                    if(document.getElementById("style_"+n+"_"+l)){
                        document.getElementById("style_"+n+"_"+l).className='show';
                    }
                }
        }
    }
    /*
    color:颜色值[黑色,红色,绿色]
    m:当前颜色序号
    index:当前款式序号
    */
    function showStyle(color,m,index)
    {
        var o=document.getElementById("style"+m).getElementsByTagName("li");
        for(k=0;k<o.length;k++)
        {
            document.getElementById("style_"+m+"_"+k).className=index==k?'show select':'show';
        }
        document.getElementById("price").innerHTML=data[color][1][index];
        document.getElementById("storage").innerHTML=data[color][2][index];
        document.getElementById("xianshi").innerHTML=color+","+data[color][0][index];//设置你要求的：比如：当我点击选择了黑色再选择款式A 能不能用一个div 显示，已选择的如<div id=xianshi>黑色，款式A</div>    }    /*
        color:颜色值
        m:颜色序号
        style:当前颜色下所有款式
    */
    function getStyle(color,m,style){
        var _style='<ul id="style'+m+'" class="hide">';
        for(i=0;i<style.length;i++)
        {
            var _onclick='onclick="showStyle(\''+color+'\','+m+','+i+')"';
            var _id="style_"+m+"_"+i;
            _style+='<li '+_onclick+' id="'+_id+'">款式'+style[i]+'</li>';
        }
        _style+='</ul>';
        return _style;
    }
window.onload=function(){
    var _color='<div id="color"><ul>';//设置你要求的：黑色，红色，绿色，做为一个div
    var _style='';
    var m=0;
    for(i in data)
    {
        _color+='<li class="color" id="color_'+m+'" onclick="showColor(\''+i+'\','+m+')">'+i+'</li>';
        _style+=getStyle(i,m,data[i][0])
        m++;
    }
    _color+='</ul></div>';
    _style='<div id="style">'+_style+'</div>';//设置你要求的：下面三个显示款式的做为一个div显示
    document.getElementById("shop").innerHTML=_color+_style;
}</script>
</head>
<body>
<div id="shop" class="shop"></div>
<div id="price"></div> <div id="storage"></div><div id="xianshi"></div>
</body>
</html>

调试易

这样的js还是ajax怎么写啊？？

解决方案 »