呈现多个下拉列表时访问 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) {&nbsp;&nbsp; &nbsp; // You don't want to navigate away from this page I suppose?&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $('#someOtherId').val($(this).text());});使用普通 JavaScript (ES6)：const elements = document.getElementsByClassName("dropdown-item");const myHandler = (e) => {&nbsp; &nbsp; // You don't want to navigate away from this page I suppose?&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; const myElement = document.getElementById("someOtherId");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; myElement.value = this.text;};Array.from(elements).forEach(function(element) {&nbsp; &nbsp; element.addEventListener('click', myHandler);});