呈现多个下拉列表时访问 JS 中的 boostrap 下拉值

Question

在 javascript 中，我有多个行从 Firebase/Firestore 集合呈现到 DOM。在每一行中，都会创建一个始终具有相同选择选项（.a 元素）的 Bootstrap 下拉列表。每行 div 的 id 属性是根据 Firestore doc.id 动态设置的。当用户在下拉列表中单击它时，我想从一个特定行的下拉列表中获取选定的值。这是我的代码：    //get Firestore collection    db.collection('collection1').get().then(snapshot => {    snapshot.docs.forEach(doc => {      //create row to be rendered...      let row = document.createElement('div');      let container = document.getElementById('myContainer');      //...append it to the container element      container.appendChild(row);      //set row id to the doc.id for future access      row.setAttribute('id', doc.id);      //bootstrap dropdown rendered here      document.getElementById(doc.id).innerHTML =        '<span class="font-weight-bolder border rounded p-2 dropdown-toggle" id="selectStatus' +doc.id+ ' "  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + doc.data().status+ '</span>'        +        '<div class="dropdown-menu" aria-labelledby="selectStatus' + doc.id + '">' +        '    <a class="dropdown-item" href="#">Action</a>' +        '    <a class="dropdown-item" href="#">Another action</a>' +        '    <a class="dropdown-item" href="#">Something else here</a>' +        '  </div>';       });     });我试过这个：$('#someId a').on('click', function(){$('#someOtherId').val($(this).html());});和其他帖子中的其他解决方案，但据我了解，它们总是指一个单一的 Dropdown 元素。在我的例子中，有多行每行都有一个下拉元素，当然每一行的下拉列表 id 都会发生变化。任何提示都会很有帮助！

Answer 1

您可以在处理点击事件时忽略 ID 并观察超链接类：

使用 jQuery：

$('a.dropdown-item').on('click', function(e) { 

    // You don't want to navigate away from this page I suppose?

    e.preventDefault();

    $('#someOtherId').val($(this).text());

});

使用普通 JavaScript (ES6)：

const elements = document.getElementsByClassName("dropdown-item");

const myHandler = (e) => {

    // You don't want to navigate away from this page I suppose?

    e.preventDefault();

    const myElement = document.getElementById("someOtherId");

    

    myElement.value = this.text;

};

Array.from(elements).forEach(function(element) {

    element.addEventListener('click', myHandler);

});