Jquery -选择下拉列表时图像不变

Question

我有一个不同车型的选择菜单，当用户从下拉菜单中选择一个车型时，汽车图像需要改变，但它不会改变。下面是我的代码：

 <h2 class="model">A6
<img src="images/3.jpg" id="image" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<select id="image" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>

var pictureList = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
     ];

$('#image').change(function () {
    var val = parseInt($('#image').val());
    $('img').attr("src",pictureList[val]);
});

​

​

Answer 1

2个问题：

对于<select />

• An数组，您使用相同的id作为<select />的索引，而不是从1开始。因此，您的<select />

• 应该如下所示：

<select id="image" class="modelSelect"> <option value="0" selected>A4</option> <option value="1">A6</option> <option value="2">A8</option> </select>

Answer 2

您的id是相同的

如下所示：

<select id="imageSelect" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>

$('#imageSelect').change(function () {
    var val = parseInt($('#imageSelect').val());
    $('img').attr("src", pictureList[val]);
});

Answer 3

这样做，因为您对两者具有相同的id，您需要更具描述性的选择器或更改id，以便两者不应该相同：

$('select#image').change(function () {
    var val = parseInt($('select#image').val());
    $('img#image').attr("src",pictureList[val]);
});