单击选项标签时更改图像答案

【问题标题】：Change image when clicking a option tag单击选项标签时更改图像
【发布时间】：2014-11-16 03:13:39
【问题描述】：

我的 HTML 中有两个选择标签，我想将这两个选择与更改图像的选项一起使用，其中一个选择标签称为模型，另一个称为颜色。当我想单击选择标签中的一个模型时，图像需要更改为该模型，然后他们可以单击颜色并且该模型的颜色需要更改。

有没有人有提示来实现这一点。

HTML 代码

                    <tr>    
                        <td><label>Model* :</label></td>
                        <td>
                            <select name="model" required>
                              <option value="cortina-ecomo-life-transport">Cortina Ecomo Life Transport</option>
                              <option value="merida-TFS-100">Merida TFS-100</option>
                              <option value="cortina-transport-roots-3">Cortina Transport Roots 3</option>
                            </select>   
                        </td>
                    </tr>
                    <tr>    
                        <td><label>Kleur* :</label></td>
                        <td>
                            <select name="kleur" required>
                              <option value="zwart">Zwart</option>
                              <option value="blauw">Blauw</option>
                              <option value="groen">Groen</option>
                              <option value="geel">Geel</option>
                              <option value="rood">Rood</option>
                              <option value="bruin">Bruin</option>
                              <option value="paars">Paars</option>
                              <option value="wit">Wit</option>
                            </select>                               
                        </td>
                    </tr>

目前我没有更多的东西，我已经用 jquery 尝试了一些东西，但是没有用。

Like they did on this website

它需要变成这样，当你点击那里的一个选项时它会改变

【问题讨论】：

放一些代码，或者你尝试实现的代码
是的，我只能这么说

标签： php jquery html css image

【解决方案1】：

试试这样的。您应该根据选择重命名图像。模型颜色.jpg。例如：cortina_rood.jpg

var imgsrc;
changeImage();

function changeImage() {
	imgsrc = $('#model').val() + '_' + $('#kleur').val() + '.jpg';
	$('#yourimage').attr('src', imgsrc);
}

$("#model").change(function() {
	changeImage();
});

$("#kleur").change(function() {
	changeImage();
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table>
		<tr>
            <td><label>Model* :</label></td>
            <td>
                <select name="model" required id="model">
                  <option value="cortina">Cortina Ecomo Life Transport</option>
                  <option value="merida">Merida TFS-100</option>
                  <option value="cortina">Cortina Transport Roots 3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><label>Kleur* :</label></td>
            <td>
                <select name="kleur" required id="kleur">
                  <option value="zwart">Zwart</option>
                  <option value="blauw">Blauw</option>
                  <option value="groen">Groen</option>
                  <option value="geel">Geel</option>
                  <option value="rood">Rood</option>
                  <option value="bruin">Bruin</option>
                  <option value="paars">Paars</option>
                  <option value="wit">Wit</option>
                </select>
            </td>
        </tr>
        <img src="" alt="" id="yourimage">
	</table>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

【讨论】：

非常感谢您的帮助，它现在运行良好。