How can I display an image upon selecting through options and clicking submit button?-CodePudding

I am currently learning through w3schools and I am new to < select >, < option >, < input > elements and I've been wondering how to display an image upon selecting and clicking the button. Can someone help me through this? I don't know what's the javascript for this. So, basically what will happen is the user pick a car from dropdown list and if he picked Toyota Fortuner, and he will click submit and the car image will appear in .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" >
     <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;
}

CodePudding user response：

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" >
     <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];
}

Here is a fiddle with the working code: https://jsfiddle.net/oa9e748n/