javascript - 使用 html 中的下拉列表框来更改图像

Question

我在我的 html 页面中使用下拉列表框。我想在从下拉列表框中选择每个项目时更改图像。我还使用了一个数组，其中包含诸如温度之类的项目数量，并且为了显示该温度，我使用了一个标签我想更改标签并在下拉列表框中选择每个项目时更改图像。

这怎么可能？

Answer 1

我不知道我是否理解正确，但这里是使用 jQuery 的示例:http://jsfiddle.net/ZFpQh/7/

html

<select id="selector">
    <option value="1">Product #1</option>
    <option value="2">Product #2</option>
    <option value="3">Product #3</option>
    <option value="4">Product #4</option>
</select>


<div>
    <span id="prod-title"></span>
</div>
<div>
    <img id="prod-image" src="someimage.png" />
</div>

javascript

var data = {
    "1" : { img: "1.png", label: "1" },
    "2" : { img: "2.png", label: "2" },
    "3" : { img: "3.png", label: "3" },
};

$('#selector').change(function() {
    var value = $(this).val();
    if (data[value] != undefined)
    {
        $('#prod-image').attr('src', data[value].img);
        $('#prod-title').text(data[value].label);
    }
});