Javascript 为放置区域中的选择创建唯一ID

我意识到这个问题与其他帖子类似，但我希望有人能帮助我解决这个问题：

我使用JQuery拖放在可拖放项中有一个

select

元素，该元素在拖动时被克隆。该元素有一个ID

select

，但我需要该ID是唯一的，这样我就可以访问下拉区域中每个框的不同选定选项

在拖放区域下方，您可以看到选择框ID，每当拖动新块时，我所需的输出是

select_1

，

select_2

，

select_3

等 现在，左边有一个原始的选择框，id为“select”，我想在拖放区中为选择框动态创建id

我想知道最好的办法是给放置区内的每个选择框指定它自己的唯一ID？ 这样我最终可以提取所选的值（如上图所示的二、三、二、三）

期望输出

$（文档）.ready（函数（）{
变量dragOpts={
助手：“克隆”，
zIndex:10
},
dropOpts={
公差：“配合”，
drop：函数（e、ui）{
if（ui.draggable.hasClass（'div-source'））{
var cloneDiv=ui.draggable.clone（），
克隆片段={
遏制：“家长”
};
cloneDiv.css({
位置：'绝对'，
top:ui.offset.top-$（this.offset（）.top，
左：ui.offset.left-$（此）.offset（）.left
}).draggable（cloneDragOpts）；
$（this.append（cloneDiv）；
}
}
};
$（'#source div'）。每个（函数（索引）{
$（此）.draggable（dragOpts）；
});
$（#target'）。可拖放（dropOpts）；
});
/*
正在尝试打印新的选择ID
一旦被拖进下降区
*/
函数删除（事件）{
$（“#目标选择”）.attr（“id”（索引，oldId）=>oldId+“#”+（索引+1））
变量id=$（“#目标选择[id]”）
.map（函数（）{
返回此.id；
})
.get（）；
document.getElementById（“内部区域”）.innerHTML=IDs.join（“，”）
}

#来源{
宽度：150px；
高度：100px；
溢出：自动；
浮动：左；
边框：2个实心#6969；
背景#d3；
}
#目标{
宽度：500px；
高度：100px；
边框：2倍实心#000；
左边距：10px；
浮动：左；
边框：2个实心#6969；
背景#d3；
位置：相对位置；
z指数：1；
}
#资料来源组，
#目标部门{
显示：块；
填充：10px；
利润率：20px；
字体大小：粗体；
字体系列：monospace；
背景色：白色；
文本对齐：居中；
最大宽度：70像素；
边框：5px纯黑；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}

一个
两个
三

如果您确实需要它们具有唯一的ID，请完全放弃默认ID，并通过如下操作添加它们：

let sels = $('#target').children('select');
for (let x = 0; x < sels.length; x++) {
  $(sels[x]).attr('id', 'select_' + x);
}

let sels=$（'#target'）.children（'select'）；
for（设x=0；x

---

但是，如果您重新运行此代码，这些ID不一定一致。

我强烈建议您不要为此使用ID。使用类似于

document.querySelector（“#inside_drop_zone select”）

let sels = $('#target').children('select');
for (let x = 0; x < sels.length; x++) {
  $(sels[x]).attr('id', 'select_' + x);
}