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

Question

我想通过单击按钮创建多个动态下拉列表.. 每个添加的下拉列表都应该有一个唯一的 I'd。

我有一段代码可以创建多个下拉列表，但我不知道如何添加代码来为 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

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

现在在函数调用中，您可以简单地获取该数字并将其加一，然后将该值赋给 select 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)
}

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

On button click create dynamic drop down lists with unique id's in JavaScript

javascript

jquery

dynamic

drop-down-menu

unique-id