Comment puis-je modifier une image en fonction d'une sélection déroulante?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="powertype" src="#" style="width: 15px; height: 15px; padding: 2px;">

<select id="spellschool">
<option>Select one</option>
<option value="biotic">biotic</option>
<option value="combat">combat</option>
<option value="tech">tech</option>
</select>

$('#spellschool').on('change', function(eventinfo){


    if(this.value == "biotic") {
        document.getElementById("powertype").src =
            "https://n7.world/images/spells/biotic.svg";
    } else if(this.value === "combat") {
        document.getElementById("powertype").src =
            "https://n7.world/images/spells/combat.svg";
    } else if(this.value === "tech") {
        document.getElementById("powertype").src =
            "https://n7.world/images/spells/tech.svg";
    } else {
        return;
    }
});

<select id="dropdown">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<span>Path to image: </span><span id="imgPath">images/one</span>

const dropdown = document.getElementById("dropdown"),
      pathSpan = document.getElementById("imgPath");
dropdown.addEventListener("change", updateImage);

function updateImage(event){
  if(event.target.value == "1"){
    pathSpan.innerHTML = "images/one";
  }
  else if(event.target.value == "2"){
    pathSpan.innerHTML = "images/two";
  }
  else if(event.target.value == "3"){
    pathSpan.innerHTML = "images/three";
  }
  else{
    pathSpan.innerHTML = "";
  }
}

<form>
  <fieldset>
    <legend>Schools of Magic</legend>
    <select name='schools'>
      <option value='0' selected>Select a School</option>
      <option value='1'>Necromancy</option>
      <option value='2'>Invocation</option>
      <option value='3'>Abjuration</option>
      <option value='4'>Divination</option>
      <option value='5'>Illusion</option>
      <option value='6'>Transmutation</option>
      <option value='7'>Conjuration</option>
      <option value='8'>Enchantment</option>
    </select>
    <input name='images' src='https://i.ibb.co/StzKvdm/8.gif' type='image' width='220' height='220' data-idx='0'>
  </fieldset>
</form>

:root {
  font: 700 small-caps 3vw/2 'Tempus Sans ITC';
}

body {
  color: #fff;
  background: #000;
}

legend {
  font-size: 2rem
}

select,
input {
  display: inline-block;
  font: inherit;
  line-height: 2rem;
  vertical-align: top;
  margin: 0 10px;
}

select {
  font-size: 1.5rem;
}

// Array of images
const symbols = [
  'https://i.ibb.co/StzKvdm/8.gif',
  'https://i.ibb.co/6Jtv9mK/nec.gif',
  'https://i.ibb.co/6BMt5f9/inv.gif',
  'https://i.ibb.co/FgznhXj/abj.gif',
  'https://i.ibb.co/Jk6X5wk/div.gif',
  'https://i.ibb.co/wwX9xz5/ill.gif',
  'https://i.ibb.co/wKqcxxF/trn.gif',
  'https://i.ibb.co/86gpFf1/cnj.gif',
  'https://i.ibb.co/R6BRtn9/enc.gif'
];

// Reference the first form on page
const form = document.forms[0];
// Collect all inputs, selects, buttons, fieldsets, etc.
const cast = form.elements;
// Reference select
const schools = cast.schools;

// Register select to the change event -- call function changeSymbol()
schools.onchange = changeSymbol;

/** changeSymbol(event)
@Param: event [object]: default Event.Object
As the select changes value so does the src of the element that is in front of it.
//A Pass event object
//B Get event.target (select#schools) value and convert it to a real number
//C Get the element that is in front of select
//D Change that element's src to the url in symbols array at the index of select value
//E* Change the data-idx value to index of select value as well
//F End function
*/
function changeSymbol(event) { //A
  const index = Number(event.target.value); //B
  const images = event.target.nextElementSibling; //C
  images.src = symbols[index]; //D
  images.dataset.idx = index; //E* [OPTIONAL]
  return false; //F
}

// Register form to submit event -- call function magic()
form.onsubmit = magic;

/** magic(event)
@Param: event [object]: default Event.Object
This is left open for whatever purpose when the image is clicked
//A Pass event object
//B Prevent the form from sending data to a server
*/
function magic(event) { //A
  event.preventDefault(); //B
}