通过在下拉菜单中选择不同的选项来更改图像-Javascript/Html_Javascript_Jquery_Html_Css_If Statement

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

javascript jquery html css if-statement

通过在下拉菜单中选择不同的选项来更改图像-Javascript/Html,javascript,jquery,html,css,if-statement,Javascript,Jquery,Html,Css,If Statement,我有一个系统，你可以选择一辆车。然后，您可以选择传输和颜色。不同的汽车和变速器会产生不同的颜色。不确定在选择颜色时如何使汽车图像显示。例如，我选择rs6和automatic，然后选择黑色。然后，我希望根据选择的颜色显示图像。我将如何编程，使不同的汽车和颜色产生不同的图像。我对编码比较陌生。任何帮助都将不胜感激 HTML 目前，它只适用于奥迪-自动-黑色和蓝色，向您展示基本理念，但它是重复代码，您也可以对其他汽车执行同样的操作在本例中，我将图像的src设置为所选汽车。例如，如果您选择了car1和

我有一个系统，你可以选择一辆车。然后，您可以选择传输和颜色。不同的汽车和变速器会产生不同的颜色。不确定在选择颜色时如何使汽车图像显示。例如，我选择rs6和automatic，然后选择黑色。然后，我希望根据选择的颜色显示图像。我将如何编程，使不同的汽车和颜色产生不同的图像。我对编码比较陌生。任何帮助都将不胜感激

HTML

目前，它只适用于奥迪-自动-黑色和蓝色，向您展示基本理念，但它是重复代码，您也可以对其他汽车执行同样的操作

在本例中，我将图像的

src

设置为所选汽车。例如，如果您选择了

car1

和

man

以及

red

，然后将图像的

src

设置为

car1manred.jpg

，我还将更改

alt

属性，以便您可以看到更改

你得做很多体力活。我已经为数据创建了一个对象，它将确定每个类别中有多少辆车。如果您使用

JSON

来实现这一点会更好

此外，我还制作了

car1autoblack

（获取图像的src）作为数组，但您可以将其作为一个对象，并在该类别中包含有关汽车的其他内容。例如

名称

，

价格

，

可用性

等等

$（“#车”）。更改（功能（）{
传输（）；
选择（）；
});
$（“#trans”）.change（函数（）{
传输（）；
选择（）；
});
$（“#颜色”）。更改（函数（）{
选择（）；
});
var cars={
car1autoblack:[“car1auto1black1.png”、“car1auto1black2.jpg”]，
car1autoblue:[“car1auto1blue1.png”、“car1auto1blue2.jpg”、“car1auto1blue3.jpeg”]
}
功能传输（）{
if（$（“#car”）.val（）=”car1“&&$（“#trans”）.val（）=”auto“）{
$（“选项[value$='red']）。隐藏（）；
$（“选项[value$='white']）。隐藏（）；
$（“选项[value$='green']）。隐藏（）；
}否则{
$（“选项[value$='red']）。show（）；
$（“选项[value$='white']）。show（）；
$（“选项[value$='green']）。show（）；
}
}
函数选择（）{
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）；
//控制台日志（cars[combineVal]）；
var inputDivHTML=“”；
var car=汽车[combineVal]；
（我在车里）{
inputDivHTML+=“”；
}
$（“.imageHere”）.html（inputDivHTML）；
}
}

img.showImg{
宽度：150px；
高度：70像素；
利润率：10px 3px；
边框：1px纯红；
浮动：左；
}


哪辆车？
奥迪RS6
宝马M4
梅赛德斯C63 AMG




什么反式？
自动的
手册




什么颜色？
黑色
蓝色
红色
白色
绿色

要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，以及到目前为止已经做了什么来解决它。@nyeddike他没有要求推荐教程，而是包含了所有相关的代码。如果您不知道简短的答案，请不要标记该问题。谢谢您的帮助。很抱歉，但你能澄清一下我将如何为不同的设置显示不同的图像吗。从代码中，该函数仅应用于id“showImg”。那么我该怎么做才能得到更多的图像呢。再次谢谢你，我想我理解这个问题。你的意思是你想展示所有奥迪，手动和红色的汽车给我5分钟我的意思是像一辆奥迪，手动和红色显示一张图片。但如果它是黑色的，我想让它再显示一个。然后对其他车也这样做。@Duncher很抱歉，我有一个预约，不得不在没有通知的情况下离开。我理解你的问题，我正在努力解决。

<!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>

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