您的位置：首页 > 其它

商品多属性选择效果

2016-02-02 17:38 295 查看
代码类似淘宝多商品属性选择，编辑库存的界面操作方式。

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<script type="text/javascript" src="jquery.min.js"></script>

</head>

<body>

<table>

<tr>

<td>尺寸</td><td>

<div class="groupclass" >

<input type="checkbox" name="goodssize" value="S">S

<input type="checkbox" name="goodssize" value="M">M

<input type="checkbox" name="goodssize" value="L">L

</div>

</td>

</tr>

<tr>

<td>颜色</td><td>

<div class="groupclass" >

<input type="checkbox" name="goodscolor" value="蓝">蓝

<input type="checkbox" name="goodscolor" value="白">白

<input type="checkbox" name="goodscolor" value="绿">绿

</div>

</td>

</tr>

<tr>

<td>套餐</td><td>

<div class="groupclass" >

<input type="checkbox" name="goodsset" value="套餐1">套餐1

<input type="checkbox" name="goodsset" value="套餐2">套餐2

<input type="checkbox" name="goodsset" value="套餐3">套餐3

</div>

</td>

</tr>

<tr>

<td>xxx</td><td>

<div class="groupclass" >

<input type="checkbox" name="goodsset1" value="xxx1">xxx1

<input type="checkbox" name="goodsset1" value="xxx2">xxx2

<input type="checkbox" name="goodsset1" value="xxx3">xxx3

</div>

</td>

</tr>

<tr>

<td>wwww</td><td>

<div class="groupclass" >

<input type="checkbox" name="goodsset2" value="www1">www1

<input type="checkbox" name="goodsset2" value="www2">www2

<input type="checkbox" name="goodsset2" value="www3">www3

</div>

</td>

</tr>

</table>

<div id="showstocklist"></div>

<script type="text/javascript">

$(":checkbox").on("click", function(){

twoarry();

showselectitem();

});

var array1 = undefined;

var temparray = undefined;

var resultarray = undefined;

function twoarry(){

temparray = new Array();

for(var i=0; i < $(".groupclass").size(); i++){

array1 = new Array();

var selectitem = $($(".groupclass").get(i)).find("input:checked");

for(var j =0 ; j < selectitem.length; j++){

array1.push($(selectitem.get(j)).val());

}

//console.log("array1:++++"+array1);

joinlist();

console.log("resultarray:++++"+resultarray);

}

}

function joinlist(){

//初始化容器

resultarray = new Array();

if(temparray.length == 0){

for(var ii = 0; ii< array1.length; ii++){

temparray.push(array1[ii]);

resultarray.push(array1[ii]);

}

}else{

for( var jj =0; jj < array1.length; jj++){

for(var mm =0; mm < temparray.length; mm++){

resultarray.push(array1[jj]+ "和" + temparray[mm]);

}

}

//同步结果集合和之前的集合

temparray = new Array();

for(var k =0; k< resultarray.length; k ++){

temparray.push(resultarray[k]);

}

}

}

function showselectitem(){

var showhtml = "";

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

showhtml += "<div>"+(i+1)+":"+resultarray[i]+"<div>"

}

$("#showstocklist").html(showhtml);

}

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航