单击按钮时，在 JavaScript 中创建具有唯一 ID 的动态下拉列表

Question

我想在单击按钮时创建多个动态下拉列表.. 每个添加的下拉列表都应该有一个唯一的 Id。

我有一段代码可以创建多个下拉列表，但我不知道如何添加代码来为 ddls 创建唯一 ID。

这是我创建 ddls 的代码：

<div class="col-md-4">
<div class="form-group" id="containerOWL">
// I want to add dynamic drop down list here
</div>
</div>

<div class="row" style="margin-bottom: 32px;">
<a class="btn btn-primary" onclick="OW_LO_LW()" style="margin: 0 0 0 15px;">+ Add OWL/LO/LW</a>
</div>

function OW_LO_LW() {
var drop_list = '<select class="form-control">';
drop_list += '<option selected disabled >Select</option>';
drop_list += '<option >FL</option>';
drop_list += '<option >GA</option>';
drop_list += '<option >AL</option>';
drop_list += '</select>';
$("#containerOWL").append(drop_list);
}

谢谢你☺️

Answer 1

您可以像这样data-number=0 向containerOWL 添加data attribute

现在在函数调用中，您可以简单地获取该数字并将其加一并将该值赋予该选择 id。最后增加该数据属性值。

完整代码：

function OW_LO_LW() {
    containerOWL = $("#containerOWL")

    const currValue = containerOWL.data("number")
    const nextValue = currValue + 1

    var drop_list = `<select id="${nextValue}" class="form-control">`;
    drop_list += '<option selected disabled >Select</option>';
    drop_list += '<option >FL</option>';
    drop_list += '<option >GA</option>';
    drop_list += '<option >AL</option>';
    drop_list += '</select>';
    containerOWL.append(drop_list);

    containerOWL.data("number", nextValue)
}