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

Question

在 javascript 中，我将 Firebase/Firestore 集合中的多行呈现到 DOM。
在每一行中，都会创建一个 Bootstrap 下拉列表，其中始终包含相同的 select-选项（.a 元素）。
每行的id属性div是根据 Firestore doc.id.
我想从下拉列表中获取 selected 值当用户在下拉列表中单击它时的特定行。

这是我的代码：

    //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());
});

和其他帖子中的其他解决方案，但据我了解，它们总是指一个单一的下拉元素。在我的例子中，有多行每行都有一个下拉元素，当然每一行的下拉 id 都会发生变化。

任何提示都会很有帮助！

Answer 1

处理点击事件时可以忽略ID，观察超链接class：

使用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);
});

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

Access boostrap dropdown value in JS when multiple dropdowns rendered

javascript

drop-down-menu

bootstrap-4

google-cloud-firestore