单击选项标记时更改图像 - Change image when clicking a option tag

Change image when clicking a option tag

本文关键字：图像选项单击 | 更新日期: 2023-09-27

我的HTML中有两个select标签，我想用这两个select来更改图像，其中一个select标签叫model，另一个叫color。当我想点击select标签中的一个模型时，图像需要更改为该模型，然后他们可以点击一种颜色，该模型的颜色需要更改。

有人能帮你做到这一点吗。

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，但没有成功。

就像他们在这个网站上做的

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

试试这样的方法。您应该根据选择重命名图像。model_color.jpg。例如：cortina_rod.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>