Need my onChange script to be more flexible

@voitonFeb 04.2004

I have a dropdown list that will show a corresponding layer according to which item in the list is selected.
My problem is, the external javascript file is shared among many pages. I need it to be more flexible than it currently is.
Right now it will only work for 3 items in a dropdown list and 3 corresponding layers. I need the script to work regardless of how many items are in the list.

Someone please help!
My Current script is below and HTML included.
Thanks guys,
TODD

</form>
<div id=”e1″>Layer 1</div>
<div id=”e2″>Layer 2</div>
<div id=”e3″>Layer 3</div>

~~[upl-file uuid=4431157f-b4e9-43c3-a890-a52b1fc51bb6 size=667B]~~hh.txt[/upl-file]

to post a comment

JavaScript

10 Comments(s) _↴

@gil_davisFeb 05.2004 — #Pass the form element. Then you can tell how many OPTIONS there are in it.

function showEl(obj) {
 for (var i=0; i&lt;obj.options.length; i++) ...
 document.getElementById("e" + obj.options[obj.selectedIndex].value).style.display = "block";
 }
 ...
 &lt;select onchange="showEl(this)"&gt;
 &lt;option ...&gt;
 &lt;/select&gt;
 ...

BTW, if you use a dummy option for the first option, it will make more sense to the user. Otherwise, you don't really have a way to select the first option. Or did you give them a button as well?

@voitonauthorFeb 05.2004 — #Maybe I didn't do something right, but this script seems to show all 3 layers when option three is selected instead of just layer 3. For option 2 it shows 1 & 2.

I just want 1 visible when option is selcted and just 2 when 2 is selected...

here is the html from what i am really working on, maybe it will make more sense. i need to make the external javascript file flexible cause different suit styles have either more or less cut types.

<style type="text/css">

/*<![CDATA[*/

#e2, #e3 {

display: none;

}

/*]]>*/

</style>

<script type="text/javascript">

//<![CDATA[

function showElement(id)

{

if(!id) return;

for(i=1; i<=3; i++) document.getElementById('e' + i).style.display = 'none';

document.getElementById('e' + id).style.display = 'block';

}

//]]>

</script>

<SELECT NAME=style class="style" size=1 onChange="showElement(options[selectedIndex].name);">

<OPTION name="1" VALUE="spagetti halter">spagetti halter

<OPTION name="2" VALUE="halter tri top">halter tri top

<OPTION name="3" VALUE="front tie triangle">front tie triangle

</SELECT>

<div id="e1" class="box"><a href="javascript:Zoom('zoom/zoomPuff1.shtml')";><img src="http://www.ipanemaswimwear.com/images/suitPuff1.jpg" border="0"></a></div>

<div id="e2" class="box"><a href="javascript:Zoom('zoom/zoomPuff2.shtml')";><img src="http://www.ipanemaswimwear.com/images/suitPuff2.jpg" border="0"></a></div>

<div id="e3" class="box"><a href="javascript:Zoom('zoom/zoomPuff3.shtml')";><img src="http://www.ipanemaswimwear.com/images/suitPuff3.jpg" border="0"></a></div>

<input type=submit name=add value="add to cart" class="button">

@gil_davisFeb 05.2004 — #Here is a complete working example.

&lt;head&gt;
 &lt;style type="text/css"&gt;
 .box {
 position: absolute;
 top: 50px;
 left: 200px;
 display: none;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function showElement(obj) {
 for (i=1; i&lt;obj.options.length; i++)
 {document.getElementById('e' + i).style.display = 'none';}
 if (obj.selectedIndex &gt; 0)
 {document.getElementById('e' + obj.selectedIndex).style.display = 'block';}
 } 
 &lt;/script&gt; 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;SELECT NAME=style class="style" size=1 onChange="showElement(this);"&gt;
 &lt;option&gt;-- Select an option --&lt;/option&gt;
 &lt;OPTION VALUE="spagetti halter"&gt;spagetti halter&lt;/option&gt;
 &lt;OPTION VALUE="halter tri top"&gt;halter tri top&lt;/option&gt;
 &lt;OPTION VALUE="front tie triangle"&gt;front tie triangle&lt;/option&gt;
 &lt;/SELECT&gt;
 &lt;input type=submit name=add value="add to cart" class="button"&gt;
 &lt;/form&gt;
 &lt;div id="e1" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff1.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff1.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div id="e2" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff2.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff2.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div id="e3" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff3.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff3.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;/body&gt;

I didn't include the CDATA stuff since I tested on my local machine. I positioned the "box" just to make it look better. You don't have to position the "box" class to make it work.

@voitonauthorFeb 06.2004 — #sorry to bother you again, but how can i make it default to the first option instead of having a "select an item" value?

@96turnerriFeb 06.2004 — #remove

[code=php]
 <option>-- Select an option --</option>[/code]

@gil_davisFeb 06.2004 — #[i]Originally posted by voiton [/i]

[B]sorry to bother you again, but how can i make it default to the first option instead of having a "select an item" value?[/B][/QUOTE]

<i>
 </i>&lt;head&gt;
 &lt;style type="text/css"&gt;
 .box {
 position: absolute;
 top: 50px;
 left: 200px;
 display: none;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function showElement(obj) {
 for (i=0; i&lt;obj.options.length; i++)
 {document.getElementById('e' + i).style.display = 'none';}
 if (obj.selectedIndex &gt;= 0)
 {document.getElementById('e' + obj.selectedIndex).style.display = 'block';}
 } 
 &lt;/script&gt; 
 &lt;/head&gt;
 &lt;body onload="showElement(document.f1.style)"&gt;
 &lt;form name="f1"&gt;
 &lt;SELECT NAME="style" class="style" size=1 onChange="showElement(this);"&gt;
 &lt;OPTION VALUE="spagetti halter" selected&gt;spagetti halter&lt;/option&gt;
 &lt;OPTION VALUE="halter tri top"&gt;halter tri top&lt;/option&gt;
 &lt;OPTION VALUE="front tie triangle"&gt;front tie triangle&lt;/option&gt;
 &lt;/SELECT&gt;
 &lt;input type=submit name=add value="add to cart" class="button"&gt;
 &lt;/form&gt;
 &lt;div id="e0" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff1.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff1.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div id="e1" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff2.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff2.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div id="e2" class="box"&gt;&lt;a href="javascript:Zoom('zoom/zoomPuff3.shtml')";&gt;&lt;img src="http://www.ipanemaswimwear.com/images/suitPuff3.jpg" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;/body&gt;

@gil_davisFeb 06.2004 — #[i]Originally posted by 96turnerri [/i]

[B]remove

[code=php]
 <option>-- Select an option --</option>[/code]

[/B][/QUOTE]That would break things rather badly. The "for" loop counts on the first item being a dummy.

@96turnerriFeb 06.2004 — #what about if you added this to body onload showElement(this); and made the pic show if selectedIndex == 0

document.images[x].src = 'foo.jpg'

selectedIndex == 1

blah blah

@gil_davisFeb 06.2004 — #[i]Originally posted by 96turnerri [/i]

[B]what about if you added ... blah blah [/B][/QUOTE]That is pretty much what I did in my post dated "02-04-2004 09:29 PM". Except:

- using "this" in the BODY tag would pass the body to the function.

- you don't have to set the selectedIndex if you use the HTML property "selected".

- you don't need to change the image source.

@96turnerriFeb 06.2004 — #sorry i miss read the code, thought it was for that, but not

Also in #JavaScript _↴

Please Help history.previous 'Start Time <= End Time' Validation HELP!

Success!

Help @voiton spread the word by sharing this article on Twitter...

Tweet This

Need my onChange script to be more flexible

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need my onChange script to be more flexible

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴