Question

我拿了我的第一个JS类，我们需要做一个列表，在select上会出现图像。

<select name="entree" id="entree" onChange="changeit(this.value)">
    <option value="hidden" selected>Choisir...</option>
    <option value="hidden2">Salade</option>
    <option value="hidden3">Escargot</option>
  </select><br /><br />

到目前为止，这就是我所拥有的。我需要帮助才能知道要创建哪些功能以在选择时显示正确的图像。如果有人选择了价值salade，就会出现沙拉的照片。如果有人选择“Choisir ......”，就不会显示img。

感谢您的帮助

Answer 1

您需要检查更改事件的选择框的值，并更改预览图像的src。我想这个例子有助于理解并解决问题。

$(document).ready(function() {

  $("#entree").on("change", function() {

    if ($(this).val() === "salade") {
      $("#imgselect").attr("src", "https://druxys.com/wp-content/uploads/2016/11/SaladThumb-GardenSalad.png");
    }
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="entree" id="entree" onChange="changeit(this.value)">
    <option value="hidden" selected>Choisir...</option>
    <option value="salade">Salade</option>
    <option value="hidden3">Escargot</option>
  </select><br />


<img id="imgselect" src="" alt="demo" />

我没有注意到那里的changeit功能，这里是 JAVASCRIPT 方式。

function changeit(option) {

  console.log(option);
  if (option === "salade")
    document.getElementById("imgselect").setAttribute("src", "https://druxys.com/wp-content/uploads/2016/11/SaladThumb-GardenSalad.png");

}

<select name="entree" id="entree" onChange="changeit(this.value)">
    <option value="hidden" selected>Choisir...</option>
    <option value="salade">Salade</option>
    <option value="hidden3">Escargot</option>
  </select><br />


<img id="imgselect" src="" alt="demo" />

JS列表，图像出现在选择上

1 个答案: