香草Javascript：如何多次使用克隆的DOM节点？

我正在创建一个非常基本的购物车

它具有相关的下拉菜单和按钮

“添加更多产品”

，该按钮将添加同一下拉菜单的多行

有两个下拉菜单，在第一个菜单中选择一个选项之前，第二个菜单必须保持禁用状态。在第二个菜单中选择一个选项之前，必须禁用数量输入。

添加更多产品

已启用数量已添加

我正在使用

cloneNode（）

为新行添加代码

因为每次单击“添加更多产品”按钮调用

new_products（），我创建克隆时，它只工作一次

我正在使用最后添加的行创建新的
克隆

添加了新行，但问题是第二个菜单和此行中的数量输入已启用

请尝试用普通（纯）JavaScript提供解决方案

编辑1:
我已经走了一半了

在附加克隆之前，我尝试访问这些元素并更改
disabled
属性值

在
函数“新产品”（
）中：

但这只适用于第二个下拉菜单

它不适用于数量
输入
控制。

代码段：


var productsByCategory={
答：[“选择子产品”、“CNC 1”、“CNC 2”、“CNC 3”、“CNC 4”]，
B:[“选择子产品”、“激光器1”、“激光器2”、“激光器3”、“激光器4”]，
C:[“选择子产品”、“橡胶1”、“橡胶2”、“橡胶3”、“橡胶4”、“橡胶5”]，
D:[“选择子产品”、“精度1”、“精度2”、“精度3”]
}
var valuesByCategory={
A:[，“A1”，“A2”，“A3”，“A4”]，
B:[，“B1”，“B2”，“B3”，“B4”]，
C:[，“C1”，“C2”，“C3”，“C4”，“C5”]，
D:[，“D1”，“D2”，“D3”]
}
产品的var no_=1；
函数下拉列表（）{
var select=document.getElementsByClassName（'first_select'）；
var selected=选择[no\ u of\ u products-1]。值；
var target=document.getElementsByClassName（'second_select'）；
var targetLength=target[no_of_products-1]。长度
/*控制台.log（“长度”+目标.Length）*/
对于（变量i=targetLength；i>=0；i--）{
/*控制台日志（i）*/
目标[no_of_products-1]。删除（i）；
}
如果（所选==0）{
var option=document.createElement（“选项”）；
option.text=“首先选择产品”；
option.value=“”；
目标[no\ u of\ u products-1]。添加（可选）；
目标[no_of_products-1].disabled=true；
}
如果（所选==1）{
对于（productsByCategory['A']中的var i）{
var option=document.createElement（“option”）；//如果这在lopp之外，则只包含最后一个选项。
option.text=productsByCategory['A'][i]；
option.value=valuesByCategory['A'][i]；
目标[no\ u of\ u products-1]。添加（可选）；
目标[no\ u of\ u products-1].disabled=false；
}
}else if（所选==2）{
对于（productsByCategory['B']中的var i）{
var option=document.createElement（“选项”）；
option.text=productsByCategory['B'][i]；
option.value=valuesByCategory['B'][i]；
目标[no\ u of\ u products-1]。添加（可选）；
目标[no\ u of\ u products-1].disabled=false；
}
}否则如果（所选==3）{
对于（productsByCategory['C']中的var i）{
var option=document.createElement（“选项”）；
option.text=productsByCategory['C'][i]；
option.value=valuesByCategory['C'][i]；
目标[no\ u of\ u products-1]。添加（可选）；
目标[no\ u of\ u products-1].disabled=false；
}
}否则{
对于（productsByCategory['D']中的var i）{
var option=document.createElement（“选项”）；
option.text=productsByCategory['D'][i]；
option.value=valuesByCategory['D'][i]；
目标[no\ u of\ u products-1]。添加（可选）；
目标[no\ u of\ u products-1].disabled=false；
}
}
}
函数下拉列表2（）{
var select=document.getElementsByClassName（'second_select'）；
var selected=选择[no\ u of\ u products-1]。值；
/*console.log（选中）*/
var submit=document.getElementsByClassName（'s_btn'）；
提交[no\ u of\ u products-1]。已禁用=false；
var add=document.getElementById（'add_按钮'）；
add.disabled=false；
}
功能新产品（）{
var order=document.getElementById（'order_now'）；
var product=document.getElementsByClassName（'product'）；
var clone=product[no\u of_products-1].cloneNode（true）；
clone.getElementsByClassName（'second_select'）[0]。disabled=true；
clone.getElementsByClassName（'add_btn'）[0]。disabled=true；
var add=document.getElementById（'add_按钮'）；
产品[no\ u of\ u products-1].removeChild（添加）；
/*console.log（克隆）*/
顺序。追加子项（克隆）；
_产品的数量+=1；
}
正文{
高度：100vh；
边际：0px；
溢出y：自动；
字体系列：“Roboto”；
}
#清楚的{
明确：两者皆有；
}
.内容{
显示器：flex；
背景色：白色；
高度：自动；
边际上限：0px；
字体系列：“Roboto”；
z指数：-1；
最小高度：88%；
}
.链接内容{
位置：相对位置；
显示：块；
浮动：左；
左：0px；
宽度：100%；
}
.选项链接{
显示：块；
字体大小：30px；
光标：指针；
}
#op1{
背景色：#中交；
}
选择，
按钮
输入{
位置：相对位置；
顶部：5em；
显示：块；
宽度：12em；
高度：2米；
}
钮扣{
宽度：8em；
}
.首先选择{
位置：相对位置；
浮动：左；
左：10%；
}
.第二次选择{
位置：相对位置；
浮动：左；
左：20%；
}
.s_btn{
位置：相对位置；
浮动：左；
左：30%；
}
.add_btn{
浮动：左；
顶部：6em；
宽度：10em；
左：5em；
}
.页脚{
显示：块；
最大高度：4%；
}
.选项内容{
显示：无；
}
#现在点菜{
显示：块；
}

挑选
中枢神经系统
激光切割
胶辊
固定装置
选择Produ
var order = document.getElementById('order_now');
var product = document.getElementsByClassName('product');
var clone = product[no_of_products-1].cloneNode(true);
clone.getElementsByClassName('second_select')[0].disabled=true;
clone.getElementsByClassName('add_btn')[0].disabled=true;