通過選項選擇並單擊提交按鈕后，如何顯示圖像？

Question

我目前正在通過 w3schools 學習，我是 <select>、<option>、<input> 元素的新手，我一直想知道如何在選擇並單擊按鈕時顯示圖像。 有人可以幫我解決這個問題嗎？ 我不知道 javascript 是什么。 所以，基本上會發生的是用戶從下拉列表中選擇一輛車，如果他選擇了 Toyota Fortuner，他將單擊提交，汽車圖像將出現在 .imageContainer div 中。 https://jsfiddle.net/ahbo5g8t

HTML：

<select name="Cars" id="carSelector">
     <option disabled selected value="default">Choose a car</option>
     <optgroup label="SUV">
          <option value="1">Toyota Fortuner</option>
          <option value="2">Toyota Rush</option>
          <option value="3">Nissan Terra</option>
          <option value="4">Mitsubishi Montero Sport</option>
          <option value="5">KIA Stonic</option>
     </optgroup>
     <optgroup label="COUPE">
          <option value="6">Ford Mustang</option>
          <option value="7">Nissan GT-R</option>
          <option value="8">Lamborghini Aventador</option>
     </optgroup>
     <optgroup label="HATCHBACK">
          <option value="9">Toyota Wigo</option>
          <option value="10">Honda Brio</option>
     </optgroup>
</select>
<input type="submit">
<div id="carsId" class="imageContainer">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/1110/toyota-fortuner-55003.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/668/toyota-rush-31398.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/25/2888/nissan-terra-2021-50929.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/24/1643/mitsubishi-montero-sport-67797.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/17/2677/kia-stonic-97542.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/7/1886/ford-mustang-45686.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/25/572/nissan-gt-r-69452.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/51/2018/lamborghini-aventador-70102.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/1851/toyota-wigo-51298.jpg">
     <img src="https://imgcdn.zigwheels.ph/medium/gallery/exterior/11/2012/honda-brio-2019-30836.jpg">
</div>

CSS：

.imageContainer {
     text-align: center;
     display: none;
}

Answer 1

Add an onclick attribute to the submit button, and set it to a javascript function that will check the value of the dropdown and set the src attribute of one image element to the corresponding image url in a dictionary.

<select name="Cars" id="carSelector">
     <option disabled selected value="default">Choose a car</option>
     <optgroup label="SUV">
          <option value="1">Toyota Fortuner</option>
          <option value="2">Toyota Rush</option>
          <option value="3">Nissan Terra</option>
          <option value="4">Mitsubishi Montero Sport</option>
          <option value="5">KIA Stonic</option>
     </optgroup>
     <optgroup label="COUPE">
          <option value="6">Ford Mustang</option>
          <option value="7">Nissan GT-R</option>
          <option value="8">Lamborghini Aventador</option>
     </optgroup>
     <optgroup label="HATCHBACK">
          <option value="9">Toyota Wigo</option>
          <option value="10">Honda Brio</option>
     </optgroup>
</select>
<input type="submit" onclick="updateCarImage()">
<div id="carsId" class="imageContainer">
     <img id="carImage">
</div>

const carImages = {
    "1": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/1110/toyota-fortuner-55003.jpg", // toyota furtuner
    "2": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/668/toyota-rush-31398.jpg", // toyota rush
    "3": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/25/2888/nissan-terra-2021-50929.jpg", // nissan terra
    "4": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/24/1643/mitsubishi-montero-sport-67797.jpg", // mitsubishi
    "5": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/17/2677/kia-stonic-97542.jpg", // kia stonic
    "6": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/7/1886/ford-mustang-45686.jpg", // ford mustang
    "7": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/25/572/nissan-gt-r-69452.jpg", // nissan gt-r
    "8": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/51/2018/lamborghini-aventador-70102.jpg", // lamborghini aventador
    "9": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/30/1851/toyota-wigo-51298.jpg", // toyota wigo
    "10": "https://imgcdn.zigwheels.ph/medium/gallery/exterior/11/2012/honda-brio-2019-30836.jpg" // honda brio
};

function updateCarImage() {
    var image = document.getElementById("carImage");

    image.src = carImages[document.getElementById("carSelector").value];
}

這是一個工作代碼： https://jsfiddle.net/oa9e748n/