Editar registro com menu select

Boa tarde

	Achei um código na web que permite definir quais itens que aparecem em um menu select através do que é selecionado em outro menu select. Seria como na imagem:

	/monthly_2020_04/select.png.2ce0d407110245d315ff5827beb58f3b.png" />

	 

	Eis o código completo e funcionando:

<form method="post" action="">
 <select name="categoria" id="sel1" onchange="giveSelection(this.value)">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
 <option value="3">Item 3</option>
 </select>

 <select name="subcategoria" id="sel2">
 <option data-option="1" value="1">Subitem 1</option>
 <option data-option="1" value="2">Subitem 2</option>
 <option data-option="2" value="3">Subitem 3</option>
 <option data-option="2" value="4">Subitem 4</option>
 <option data-option="3" value="5">Subitem 5</option>
 <option data-option="3" value="6">Subitem 6</option>
 </select>
</form>

<script type="text/javascript">
 var sel1 = document.querySelector('#sel1');
 var sel2 = document.querySelector('#sel2');
 var options2 = sel2.querySelectorAll('option');

 function giveSelection(selValue) {
 sel2.innerHTML = '';
 for (var i = 0; i < options2.length; i++) {
 if (options2[i].dataset.option === selValue) {
 sel2.appendChild(options2[i]);
 }
 }
 }
 giveSelection(sel1.value);
</script>

	Testei este código em um sistema de cadastro de produtos, e funciona muito bem. Esse sistema também possui uma página para a edição dos dados destes produtos, e é aí que surgiu o problema.

	Ao abrir a página de edição, eu uso esse mesmo código *select , *mas acrescento nele **selected="selected"** para então exibir o item correspondente ao produto editado.

	O problema está no segundo select, que ao invés de imediatamente mostrar o subitem correspondente ao que está marcado no primeiro select, ele mostra sempre o último subitem da lista.

	 

	Não sei se conseguiram entender tudo isso, mas se alguém puder ajudar, fico grato.