通过在下拉列表中选择不同的选项来更改图像 - Javascript / Html

Question

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.例如，我选择 rs6 和自动，然后选择黑色。 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 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 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();
}
}

Answer 1

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.目前它仅适用于Audi - Automatic - black and blue ，向您展示基本概念，但它是重复代码，您也可以对其他汽车执行相同操作。

In this example I am setting the src of the image as the car selected.在此示例中，我将图像的src设置为所选汽车。 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.例如，如果您选择car1和man和red然后将图像的src选择为car1manred.jpg ，我也会更改alt属性，以便您可以看到更改。

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.如果您为此使用JSON会更好。

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.此外，我已将car1autoblack （它获取图像的 src）作为一个数组，但您可以将其作为一个对象，并在此类别中包含有关汽车的其他内容。 for example name , price , availability and much more例如name 、 price 、 availability等等

 $("#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>

通过在下拉列表中选择不同的选项来更改图像 - Javascript / Html

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-12 02:35:15

通过在下拉列表中选择不同的选项来更改图像 - Javascript / Html

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-12 02:35:15

解决方案1
1 已采纳 2017-01-12 02:35:15