Question

我的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

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

Answer 1

尝试这样的事情。您应该根据选择重命名图像。 model_colour.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>

单击选项标记时更改图像

1 个答案: