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>

检查选择选项是否已用Javascript悬停/鼠标悬停

1 个答案: