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个问题：

1. 您对<img />和<select />
使用相同的ID

2. 数组以索引0而不是1开头。因此<select />的HTML应如下所示：

   <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]);
});

Answer 4

id图像$('#image')是balise img而不是下拉列表，因此修改一个id以匹配好的id并且不要忘记数组从0开始而不是1;）

 <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="selectimage" class="modelSelect">
    <option value="0" selected>A4</option>
    <option value="1">A6</option>
    <option value="2">A8</option>
</select>

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

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

Answer 5

替换此行

// added your image id within its parent
$('img #image').attr("src", pictureList[val]);

Answer 6

<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="ddlImage" 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",
     ];

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

Answer 7

小提琴：http://jsfiddle.net/97uue/1/

HTML :(更改图像ID，选择选项值，因为数组索引从0开始。）

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

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

JS代码：

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

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

Answer 8

您正在侦听图像上的更改事件。图像和下拉列表都具有相同的ID，它们必须是唯一的。

为下拉列表使用不同的id，它会将事件处理程序附加到正确的元素。

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

请注意，我还将图片列表的索引更改为从0而不是1开始。

并更改html中的select标记的ID：

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