在html中使用下拉列表框来更改图像 [英] Working with dropdownlist box in html for changing of image

问题描述

我在我的html页面中使用下拉列表框。我想从下拉列表框中选择每个项目的图像。此外，我正在使用一个数组，其中包含诸如temp之类的项目数并显示该临时数据我正在使用一个标签我想更改标签，并且还会在下拉列表框中选择每个项目时更改图像。

b
$ b

怎么可能？

解决方案

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

html

 < select id = 选择器 > 
< option value =1>产品＃1< / option> 
< option value =2>产品＃2< / option> 
< option value =3>产品＃3< / option> 
< option value =4>产品＃4< / option> 
< / select> 
 
 
< div> 
< span id =prod-title>< / span> 
< / div> 
< div> 
< img id =prod-imagesrc =someimage.png/> 
< / div> 
  

javascript

  var data = {
1：{img：1.png，label：1}，
2：{img： 2.png，标签：2}，
3：{img：3.png，标签：3}，
}; 
 $ b $（'＃selector'）。change（function（）{
 var value = $（this）.val（）; 
 if（data [value]！=未定义）
 {
 $（'＃prod-image'）。attr（'src'，data [value] .img）; 
 $（'＃prod-title'）。text （data [value] .label）; 
} 
}）; 
  

I am using dropdown list box in my html page. I want to change an image on selection of each item from dropdown list box. And also i am using one array which contains the number of item such as temp and for displaying that temp I am using one label I want to change label and also change image on selection of each item in dropdown list box.

How is it possible?

解决方案

I don't know if I understand you correctly, but here is the sample using 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);
    }
});

这篇关于在html中使用下拉列表框来更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！