How can I load this select input field with options passed using JS?-CodePudding

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!

CodePudding user response：

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>