javascript - datalist 上的事件监听器 (html,css.javascript)

Question

我已经创建了这个数据列表，当有人选择一个选项时，我希望出现一个图像。更准确地说，选项是希腊岛屿，因此当有人选择其中一个岛屿时，应该会出现该岛屿的独特图像。我不确切知道该事件发生使用什么 js 代码。

<label for="epilogh-proorismou">Επιλέξτε προορισμό:</label>
<input list="epiloges" id="proorismoi" name="proorismoi" />
<datalist id="epiloges">
   <option value="Κρήτη">
   <option value="Σαντορίνη">
   <option value="Χίος">
   <option value="Πάρος">
   <option value="Κέρκυρα">
</datalist>
    

标签： javascripthtmlcss

Answer 1

这将满足您的需求：

function setImage(value) {
  var imgs = document.getElementsByTagName("img"); 
    for(var i = 0; i < imgs.length; i++){
      imgs[i].style.display = "none"; 
  }
  document.getElementById(value).style.display = 'block';
}

img {
  display: none;
}

<label for="epilogh-proorismou">Επιλέξτε προορισμό:</label>
<input list="epiloges" id="proorismoi" onmousedown="this.value='';" onchange="setImage(this.value);"  name="proorismoi" />

<datalist id="epiloges">
    <option value="Κρήτη">
    <option value="Σαντορίνη">
    <option value="Χίος">
    <option value="Πάρος">
    <option value="Κέρκυρα">
</datalist>

<img id="Κρήτη" src="" alt="Κρήτη"></img>
<img id="Σαντορίνη" src="" alt="Σαντορίνη"></img>
<img id="Χίος" src="" alt="Χίος"></img>
<img id="Πάρος" src="" alt="Πάρος"></img>
<img id="Κέρκυρα" src="" alt="Κέρκυρα"></img>