When loading an HTML table, there is this select input field, which should make available some options.
Right after the HTML table row is built, I’m calling a function, which should populate this input field, getting it by its class.
Here is the HTML piece and the function:
function loadTelaOptions(telaOptions) {
telaOptions = ["09-Black", "11-LT Jaspe"]; //Here for tests
document.querySelector('tableBodySelect').value = '';
let selectList = document.querySelector('tableBodySelect');
let options = selectList.getElementsByTagName('option');
for (let i = options.length; i--;) {
selectList.removeChild(options[i]);
}
let option = document.createElement("option");
option.value = "";
option.text = "";
selectList.appendChild(option);
telaOptions.forEach(function(item, index) {
let option = document.createElement("option");
option.value = item.toLowerCase();
option.text = item;
selectList.appendChild(option)
});
}<td>
<select name='tableselect' required='required' class='tableBodySelect' value='Trying'>
</select>
</td>Appreciate any help!
>Solution :
Your selectors for .querySelector('tableBodySelect') doesn’t match your desired elements. You try to match the classes, therefore you need to prepend a . to your selector .querySelector('.tableBodySelect')
This does already resolve your issue.
function loadTelaOptions(telaOptions) {
telaOptions = ["09-Black", "11-LT Jaspe"]; //Here for tests
document.querySelector('.tableBodySelect').value = '';
let selectList = document.querySelector('.tableBodySelect');
let options = selectList.getElementsByTagName('option');
for (let i = options.length; i--;) {
selectList.removeChild(options[i]);
}
let option = document.createElement("option");
option.value = "";
option.text = "";
selectList.appendChild(option);
telaOptions.forEach(function(item, index) {
let option = document.createElement("option");
option.value = item.toLowerCase();
option.text = item;
selectList.appendChild(option)
});
}
loadTelaOptions();<td>
<select name='tableselect' required='required' class='tableBodySelect' value='Trying'>
</select>
</td>