Убедитесь, что опция выбора наведена / наведена на Javascript

Question

Мы проверяем, отмечена ли опция выбора, и отображаем / заменяем определенное изображение для каждой опции (если отмечено).

Здесь пока что код. Он отлично работает (конечно, изображения в массиве должны быть в том же порядке, что и соответствующие параметры в поле выбора).

/* IMAGES */
var fili_Path='https:/example.com/images/';
var fili_ImgAry=new  Array('','000.jpg','002.jpg','004.jpg','006.jpg'');


function Swap_fili(obj,id){
 var i=obj.selectedIndex;
 if (i<1){ return; }
 document.getElementById('myimage').src=fili_Path+fili_ImgAry[i];
}

<select onchange="Swap_fili(this,'mydiv');">
<option value="000">Typ 000</option>
<option value="002">Typ 002</option>
<option value="004">Typ 004</option>
...
</select>

<div id="mydiv"><img id="myimg" src ="_url_"></div>

Теперь мы пытаемся отобразить изображения вне div уже при наведении / навести опцию. Абсолютно не повезло (и не поняла) здесь. Все подсказки приветствуются.

Answer 1

Вы можете рассмотреть возможность имитации поля выбора и опций. Таким образом, вы можете включить изображения в параметры.

const options = document.querySelector("ul.options");
const selected = document.querySelector("div.selected");
selected.addEventListener("click", (e) => options.classList.toggle("open") );

const optionList = [...document.querySelectorAll("ul.options li")];
optionList.map( (option) => option.addEventListener("click", function() {
  const value = this.getElementsByTagName("span")[0].innerHTML;
  selected.innerHTML = value;
  document.querySelector("#sel").value = value;
  options.classList.toggle("open");
}));

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
  <div class="selected">Select an option</div>
  <ul class="options">
    <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
    <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
    <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
  </ul>
</div>
</form>