CODEWITHSUNDEEP
javascriptjqueryhtmlcssif-statement
Duncher
Duncher

Reputation: 27

Make image change with selecting different option in dropdown - Javascript / Html

I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.

HTML

<!DOCTYPE html>
<html><head>
<title></title>
</head>

<body>
<form name="CarConfigurator">
    <select id="car" name="Car_make">
        <option value="" selected="selected">Which car?</option>
        <option value="car1">Audi RS6</option>
        <option value="car2">BMW M4</option>
        <option value="car3">Mercedes C63 AMG</option>
        </select>
    <br>
    <br>
    <select id="trans" name="A_M">
        <option value="" selected="selected">What trans?</option>
        <option value="auto">Automatic</option>
        <option value="man">Manual</option>
        </select>
    <br>
    <br>
    <select id="color" name="Color">
        <option value="" selected="selected">What Color?</option>
         <option value="black">Black</option>
         <option value="blue">Blue</option>
         <option value="red">Red</option>
         <option value="white">White</option>
         <option value="green">Green</option>
         </select>
 </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1  /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>

Javascript

$("#car").change(function () {
transmission();
});

$("#trans").change(function () {
transmission();
});

function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
    $("option[value$='red']").hide();
    $("option[value$='white']").hide();
    $("option[value$='green']").hide();
} else {
    $("option[value$='red']").show();
    $("option[value$='white']").show();
    $("option[value$='green']").show();
}
}

Upvotes: 1

Views: 1382

Answers (1)

ab29007
ab29007

Reputation: 7766

For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.

In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.

you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.

Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more

$("#car").change(function () {
transmission();
  selection();
});

$("#trans").change(function () {
transmission();
  selection();
});

$("#color").change(function () {
  selection();
});

var cars = {
  car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
  car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}

function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
    $("option[value$='red']").hide();
    $("option[value$='white']").hide();
    $("option[value$='green']").hide();
} else {
    $("option[value$='red']").show();
    $("option[value$='white']").show();
    $("option[value$='green']").show();
}
}

function selection(){
  if ($("#car").val() && $("#trans").val() &&         $("#color").val()) {
    var carVal = $("#car").val();
    var transVal = $("#trans").val();
    var colorVal = $("#color").val();
    var combineVal = carVal+transVal+colorVal;
    //var imageLink = combineVal+".jpg";
    //$("#showImg").attr("src", imageLink);
    //$("#showImg").attr("alt", imageLink);
    //console.log(cars[combineVal]);
    var inputDivHTML = "";
    var car = cars[combineVal];
    for(i in car){
      inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>"; 
    }
    $(".imageHere").html(inputDivHTML);
  }
}
img.showImg{
  width:150px;
  height:70px;
  margin:10px 3px;
  border:1px solid red;
  float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
    <select id="car" name="Car_make">
        <option value="" selected="selected">Which car?</option>
        <option value="car1">Audi RS6</option>
        <option value="car2">BMW M4</option>
        <option value="car3">Mercedes C63 AMG</option>
        </select>
    <br>
    <br>
    <select id="trans" name="A_M">
        <option value="" selected="selected">What trans?</option>
        <option value="auto">Automatic</option>
        <option value="man">Manual</option>
        </select>
    <br>
    <br>
    <select id="color" name="Color">
        <option value="" selected="selected">What Color?</option>
         <option value="black">Black</option>
         <option value="blue">Blue</option>
         <option value="red">Red</option>
         <option value="white">White</option>
         <option value="green">Green</option>
         </select>
 </form>
<div class="imageHere">
  <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>

Upvotes: 1

Related Questions