CODEWITHSUNDEEP
javascripthtml
Sandeep
Sandeep

Reputation: 723

Working with dropdownlist box in html for changing of image

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?

Upvotes: 3

Views: 1911

Answers (1)

Samich
Samich

Reputation: 30175

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

Upvotes: 2

Related Questions