商品多属性选择效果

最新推荐文章于 2021-01-20 03:48:40 发布

gong0585

最新推荐文章于 2021-01-20 03:48:40 发布

阅读量2.3k

点赞数

分类专栏：商品管理文章标签： jquery 商品多属性淘宝商品属性选

本文链接：https://blog.csdn.net/gong0585/article/details/50625063

版权

商品管理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码类似淘宝多商品属性选择，编辑库存的界面操作方式。

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