用js 写一个动态生成suk 功能
时间: 2024-03-13 21:48:16 浏览: 19
好的,以下是一个使用 JavaScript 实现的动态生成 SKU 的示例代码:
```javascript
// SKU 数据
var skuData = [
{ name: '颜色', values: ['红色', '绿色', '蓝色'] },
{ name: '尺寸', values: ['S', 'M', 'L', 'XL'] },
{ name: '材质', values: ['棉质', '丝绸', '涤纶'] }
];
// 生成 SKU
function generateSKU() {
var result = [];
var selected = document.querySelectorAll('select');
for (var i = 0; i < selected.length; i++) {
result.push(selected[i].value);
}
return result.join('-');
}
// 更新 SKU 选项
function updateOptions() {
var selected = document.querySelectorAll('select');
var options = [];
for (var i = 0; i < selected.length; i++) {
options.push(selected[i].value);
}
for (var i = 0; i < selected.length; i++) {
var select = selected[i];
var index = i;
for (var j = i + 1; j < selected.length; j++) {
index *= skuData[j].values.length;
}
for (var j = 0; j < skuData[i].values.length; j++) {
select.options[j] = new Option(skuData[i].values[j], j);
var enabled = false;
var value = skuData[i].values[j];
for (var k = 0; k < options.length; k++) {
if (k != i && options[k].indexOf(value) >= 0) {
enabled = true;
break;
}
}
select.options[j].disabled = !enabled;
}
select.selectedIndex = Math.floor(options[i] / index);
}
}
// 生成表单
var form = document.createElement('form');
for (var i = 0; i < skuData.length; i++) {
var label = document.createElement('label');
label.textContent = skuData[i].name + ': ';
form.appendChild(label);
var select = document.createElement('select');
select.addEventListener('change', function() {
updateOptions();
document.querySelector('#sku').value = generateSKU();
});
form.appendChild(select);
for (var j = 0; j < skuData[i].values.length; j++) {
var option = new Option(skuData[i].values[j], j);
select.options.add(option);
}
}
// SKU 输入框
var skuLabel = document.createElement('label');
skuLabel.textContent = 'SKU: ';
form.appendChild(skuLabel);
var skuInput = document.createElement('input');
skuInput.id = 'sku';
skuInput.type = 'text';
skuInput.readOnly = true;
form.appendChild(skuInput);
// 添加表单到页面
document.body.appendChild(form);
// 初始化选项
updateOptions();
document.querySelector('#sku').value = generateSKU();
```
以上代码中,我们先定义了一个 SKU 数据数组 `skuData`,其中包含了属性名称和属性值。接着,我们使用 JavaScript 动态创建表单元素,并通过循环生成表单项和选项。在生成选项时,我们根据已选的属性值来动态计算当前选项是否可用,并将其设置为对应的 `disabled` 属性。在用户选择选项时,我们通过 `change` 事件来更新已选的属性值,并重新生成可用的选项和 SKU。最后,我们将表单添加到页面中。
运行以上代码,您将会得到一个动态生成 SKU 的表单,其中包含了所有的属性名称和属性值。您可以根据需要修改 `skuData` 数组中的属性名称和属性值,来生成不同的 SKU 表单。