1.正常状态
2.点击添加
3. 点击添加的input框后面的添加按钮
4.点击按钮刷新规则下方表格会弹出各个排列组合,价格可以修改
5.上代码
<div class="videobox" style="margin-left:-12px;">
<label class="layui-form-label" style="width: 90px;">商品规格</label>
</div>
<div class="videoboxs" style="margin-left:115px;margin-top:4px;">
<input class="layui-btn" id="videoAddBtn" type="button" value="添加" onclick="layui.addlist()">
<input class="layui-btn layui-btn-normal refresh_speclist" type="button" value="刷新规格">
<ul style="display:flex;flex-wrap:wrap;">
</ul>
</div>
<style>
.spec_ul{margin-top:30px;}
.spec_li,.specval_li{display:inline-block;width:22%;}
.spec_li:first-child,.specval_li:first-child{width:75%;}
.spec_li_son,.specval_li_son{display:inline-block;width:32%;}
.spec_li_son input[readonly],.specval_li_son input[readonly]{color:#929292}
</style>
<ul class="spec_ul">
</ul>
<div class="spec_val_div">
</div>
// 添加规格
layui.addlist = function () {
var len=$(".AddSpec").length +1;
console.log(len);
if(len>3){
return fasle
}
let number = $(".videoboxs ul li").length + 1;
$(".videoboxs ul").append(`
<li style="margin-top: 6px;" class="addtypelist">
<div class="layui-input-inline" style="width: 40%;">
<input id="title`+ number + `" type="text" name="file_title" required lay-verify="required" placeholder="规格名称" autocomplete="off" class="layui-input spec_name " value=''>
</div>
<input class="layui-btn AddSpec AddSpec`+len+`" id="videoAddBtn" type="button" value="添加">
<div class="layui-input-inline listremove" style="width: 30%;text-align: center;">
<span style="font-size: 16px;color: #fff;line-height: 38px;background-color: #FF5722;padding: 8px;cursor: pointer;border-radius: 5px;"> 删除</span>
</div>
<div class="videoboxss">
</div>
</li>
`);
addDelect();
}
// 添加规格下的参数
$(document).on("click",".AddSpec",function(){
var class_this='';
if($(this).hasClass('AddSpec1')){
class_this='spec_val1';
}else if($(this).hasClass('AddSpec2')){
class_this='spec_val2';
}else if($(this).hasClass('AddSpec3')){
class_this='spec_val3';
}
let number = $(".videoboxss li div ").length + 1;
$(this).next().next('.videoboxss').append(`
<li style="margin-top: 6px;margin-left: 25px;" class="addtypelist">
<div class="layui-input-inline" style="width: 40%;">
<input id="title`+ number + `" type="text" name="file_title" required lay-verify="required" placeholder="规格值" autocomplete="off" class="layui-input spec_val `+class_this+`">
</div>
<div class="layui-input-inline Slistremove" style="width: 30%;text-align: center;">
<span style="font-size: 16px;color: #fff;line-height: 38px;background-color: #FF5722;padding: 8px;cursor: pointer;border-radius: 5px;"> 删除</span>
</div>
</li>
`);
addDelect();
})
// 刷新规格
$(document).on('click','.refresh_speclist',function () {
$('.spec_val_div').html('');
$('.spec_val1').each(function(){
var val=$(this).val();
console.log()
if($('.spec_val2').length>0){
if($('.spec_val3').length>0){
$('.spec_val2').each(function(){
var val2=$(this).val();
$('.spec_val3').each(function(){
var val3=$(this).val();
$('.spec_val_div').append(
'<ul class="specval_ul"> ' +
'<li class="specval_li"> ' +
'<ul class="specval_ul_son">' +
'<li class="specval_li_son"><input class="layui-input" name="spec_val_price" value="'+val+'"></li>' +
'<li class="specval_li_son"><input class="layui-input" value="'+val2+'"></li>' +
'<li class="specval_li_son"><input class="layui-input" value="'+val3+'"></li>' +
'</ul> ' +
'</li> ' +
'<li class="spec_li"> ' +
'<input class="layui-input" type="text" value="价格"> ' +
'</li> ' +
'</ul>'
);
})
})
}else{
$('.spec_val2').each(function(){
var val2=$(this).val();
$('.spec_val_div').append(
'<ul class="specval_ul"> ' +
'<li class="specval_li"> ' +
'<ul class="specval_ul_son">' +
'<li class="specval_li_son"><input class="layui-input" value="'+val+'"></li>' +
'<li class="specval_li_son"><input class="layui-input" value="'+val2+'"></li>' +
'</ul> ' +
'</li> ' +
'<li class="spec_li"> ' +
'<input class="layui-input" type="text" value="价格"> ' +
'</li> ' +
'</ul>'
);
})
}
} else{
$('.spec_val_div').append(
'<ul class="specval_ul"> ' +
'<li class="specval_li"> ' +
'<ul class="specval_ul_son">' +
'<li class="specval_li_son"><input class="layui-input" value="'+val+'"></li>' +
'</ul> ' +
'</li> ' +
'<li class="spec_li"> ' +
'<input class="layui-input" type="text" value="价格"> ' +
'</li> ' +
'</ul>'
);
}
})
})