JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<form name="cadastro" action="php/cadastro.php" method="post">
   <select name = "time1" ></select>

    <input type="text" name="placar1" size="1"/>
    X
    <input type="text" name="placar2" size="1"/>

    <select name = "time2"></select>

    <input type="submit" name="cadastrar" value="CADASTRAR"/> 
  </form>

JavaScript

const init = () => {
setOptions(getSelectReference('time1'), generateOptions(null, null));
  setOptions(getSelectReference('time2'), generateOptions(null, null)); 
    var lis = document.querySelectorAll('select');
    for (var i = 0; i < lis.length; i++) {
		
	 lis[i].addEventListener("change", function(e) {
 changeOption(this);
});	
	}
}	

const changeOption = (selectSource) => {
	  var selectTarget = getSelectToChange(selectSource.name);
    var options = generateOptions(selectTarget.value, selectSource.value);
    setOptions(selectTarget, options);
}	

const setOptions = (selectTarget, options) => {
 selectTarget.innerHTML = '';
  options.forEach(function(item) {
    selectTarget.appendChild(item);
  });
}	


const generateOptions = (optionSelected, optionToRemove) => {
  var options = getOptions();
  var elementOptions = [];
      
  options.forEach(function(item){
      if(item.name !== optionToRemove || optionToRemove == 'escolha') {
        var el = document.createElement('option');
        el.setAttribute('name',item.name);
        el.value = item.value;
        el.innerHTML = item.text;
        
        if(item.name === optionSelected) {
          el.setAttribute('selected', true);
        }
      
        elementOptions.push(el);
      }
  });
  return elementOptions;
}	

const getSelectToChange = (selectSource) => {
  var selectTarget = selectSource === 'time1'? 'time2' : 'time1';
  var selectElement = getSelectReference(selectTarget);
  return selectElement;
}


const getSelectReference = (selectTarget) => {
  return document.getElementsByName(selectTarget)[0];
}


const getOptions = () => {
  var times = [
    {
      name: 'escolha',
      value: 'escolha',
      text: 'Escolha'
    },
    {
      name: 'atletico',
      value: 'atletico',
      text: 'Atlético'
    },
    {
      name: 'botafogo',
      value: 'botafogo',
      text: 'Botafogo'
    },
    {
      name: 'coritiba',
      value: 'coritiba',
      text: 'Coritiba'
    },
    {
     ...