- I have created multiple rows in javascript that are being rendered to the DOM from a Firestore collection.
- Each row contains a Bootstrap dropdown with the same select options (".a" elements).
- The id attribute of each row div is dynamically set based on the Firestore doc.id.
- When a user clicks on the dropdown list, I want to retrieve the selected value from the dropdown of a specific row.
This is my implementation:
// Retrieve Firestore collection
db.collection('collection1').get().then(snapshot => {
snapshot.docs.forEach(doc => {
// Create and render row...
let row = document.createElement('div');
let container = document.getElementById('myContainer');
// Append row to the container element
container.appendChild(row);
// Set row id as doc.id for future reference
row.setAttribute('id', doc.id);
// Render Bootstrap dropdown 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>';
});
});
I've attempted this solution:
$('#someId a').on('click', function(){
$('#someOtherId').val($(this).html());
});
However, existing solutions I found seem to focus on a single dropdown element. In my scenario, there are multiple rows with individual dropdown elements where their ids vary per row.
I would appreciate any insights or guidance on solving this issue!