I'd like to know how to get the text selected from the Dropdown list. Probably I am hooking to the element before it gets the options added dynamically, i.e.: When it was still empty.
HTML
`
`
**Dropdown created by following JavaScript:**
`$('.button').click(function() {
const url = 'http://localhost:3000/OverAllCompInfo';
let dropdown = document.getElementById('componentList');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Select Components Required';
fetch(url)
.then(
function(response) {
if (response.status !== 200) {
console.warn('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].component_name;
dropdown.add(option);
}
$('#componentList').multiselect({
includeSelectAllOption: true
});
});
}
)
.catch(function(err) {
console.error('Fetch Error -', err);
});
});
$('#hwButton').click(function() {
var selected = $("#componentList option:selected");
var message = "";
selected.each(function() {
message += $(this).text() + "\n";
});
alert(message);
});`
The problem is when I try to get the selected text, it returns empty string. I have created the dropdown dynamically. The option values are added based on the data received from fetch. When I am trying to retrive selected text, it returns empty string because I am hooking to #componentList ie. my select id
khaivngo
commented
2 years ago
I'd like to know how to get the text selected from the Dropdown list. Probably I am hooking to the element before it gets the options added dynamically, i.e.: When it was still empty.
HTML
`