PDA

View Full Version : Help, dropdown selection!



graficus
Mar 20th, 2007, 10:03 AM
Please help me figure this out.
I need to display an image based on text values inside of <option> instead of the "value" tag.


<select name="color"
onchange="change_pic('swatch', this.options[this.selectedIndex].value);">
<option value="">Select Color</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">Black</option>
</select>

<script type="text/javascript">
var pic = 'images/swatches/';
function change_pic(id, format) {
var getpic;
id == 'swatch'
{
url = document.getElementById('swatch');
url.src = pic + format + '.jpg';
}
}
</script>

<img id="swatch" src="images/swatches/select_color.jpg">


Values come from ASP generating database stuff.
Script works fine, except I would have to name my images 1.jpg 2.jpg instead of 'green', 'blue' etc. (the numbers come from primary key in database, I have no control over that).
So the text in option that the user sees, that's what I want inserted as a part of image name.

Thank you!

graficus
Mar 20th, 2007, 10:36 AM
Something tells me it's all about:

this.options[this.selectedIndex].value

coothead
Mar 20th, 2007, 10:45 AM
Hi there graficus,

Something tells me it's all about:

this.options[this.selectedIndex].value
Yes, change it to...


this.options[this.selectedIndex].firstChild.nodeValue
coothead

graficus
Mar 20th, 2007, 08:17 PM
Wow thank you coothead!
Things are so easy when you know your stuff ;)

Could you tell me one more thing:
Some of the options have values with forward slashes in them.
How can I convert them to dashes?

10/14H should become 10-14H.jpg

coothead
Mar 20th, 2007, 08:40 PM
Hi there graficus,

does this example help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
window.onload=function() {
document.getElementById('myselect').onchange=function() {
changeSlash(this.value);
}
}
function changeSlash(slash) {
if(slash!='') {
hyph=slash.replace('/','-');
alert(hyph);
}
}
</script>

</head>
<body>

<div>
<select id="myselect">
<option value="">---options---</option>
<option value="10/14H">green</option>
<option value="30/24g">red</option>
<option value="20/17p">blue</option>
</select>
</div>

</body>
</html>
coothead

graficus
Mar 20th, 2007, 10:12 PM
Thanks a bunch for your help. Couldn't have done it without you!
Here is my final version:


<select name="idOption<%=pcv_strOptionGroupCount%>" style="margin-top: 3px;"
onchange="change_pic('swatch', this.options[this.selectedIndex].firstChild.nodeValue);">

<script type="text/javascript">
var pic = 'images/swatches/';
function change_pic(id, format) {
var getpic;
id == 'swatch'
{
url = document.getElementById('swatch');
dash = format.replace("/","_");
url.src = pic + dash + '.jpg';
}
url.onerror = function () {
url.src = 'images/swatches/NA.jpg';
}
}
</script>

<img width="96" height="96" id="swatch" src="images/swatches/select_color.jpg" />


I hope someone else will find this useful as well!