Dynamic Select Onchange

[pimpmaster]

I am trying to show/hide elements based on the currently selected option. I have a rough idea of how to do this, but am having trouble with my javascript syntax.

Here is the basic logic behind what I am trying to accomplish:

1. All divs specified here will start off hidden
2. If currently selected option = Books || Catalogs || Magazines || Newspapers, then show div#binding
3. If currently selected option = Brochure
then show div#catalog

Here is my humble attempt

[HTML]<select name="publicati ons" onchange="if (this.value == 'Books' || 'Catalogs' || 'Magazines' || 'Newspapers') {
$('binding').sh ow(); }
else {
$('binding').hi de(); }
if (this.value == 'Brochures') {
$('brochure').s how(); }
else {
$('brochure').h ide(); }"[/HTML]

My main problem is I dont understand the proper way to test for multiple values (as you can see in those butchered OR statements)

I also have the issue of the divs being initially visible. perhaps I need to manipulate the dom to change CSS classes or something.

[gits]

hi ...

you may use the following:

[CODE=javascript]
if (this.value == 'Books' || this.value == 'Catalogs' || this.value == 'Magazines' || this.value == 'Newspapers') {
// do something
}
[/CODE]

or little bit more cool ;) the following:

[CODE=javascript]
var list = {'Books': 1, 'Catalogs': 1, 'Magazines': 1, 'Newspapers': 1};

if (this.value in list) {
// do something
}
[/CODE]

kind regards ...

[epots9]

to make then hidden at startup use:
[HTML]
<div id="id" style="visibili ty:hidden;"></div>
[/HTML]

it might be easy if u create a js function istead of making everything on one line, then in the select tag it would have: onchange="funct ionname();"

then do get the value can compare them. to unhide its
[CODE=javascript]
document.getEle mentById("id"). style.visibilit y = "visible"
[/CODE]

[pimpmaster]

Thanks for the pointers guys!

I almost got this working... have a look

var list = {'Annual Report': 1, 'Book': 1, 'Catalog': 1, 'Look Book': 1, 'Magazine': 1};
				if (this.value in list) {
				    document.getElementById('binding').style.display = 'block';
				}
				else {
			    document.getElementById('binding').style.display = 'none';}
			
			    if (this.value = 'Brochure') {
				    document.getElementById('brochure').style.display = 'block';}
				else {
			    	document.getElementById('brochure').style.display = 'none';}

The only problem I have now is that no matter what option I select, only the option "Brochure" is selected. Something must be funky with my syntax.

Any ideas?

[epots9]

Thanks for the pointers guys!

I almost got this working... have a look

var list = {'Annual Report': 1, 'Book': 1, 'Catalog': 1, 'Look Book': 1, 'Magazine': 1};
				if (this.value in list) {
				    document.getElementById('binding').style.display = 'block';
				}
				else {
			    document.getElementById('binding').style.display = 'none';}
			
			    if (this.value = 'Brochure') {
				    document.getElementById('brochure').style.display = 'block';}
				else {
			    	document.getElementById('brochure').style.display = 'none';}

The only problem I have now is that no matter what option I select, only the option "Brochure" is selected. Something must be funky with my syntax.

Any ideas?

u have:
[CODE=javascript]
if (this.value = 'Brochure') {
document.getEle mentById('broch ure').style.dis play = 'block';}
else {
document.getEle mentById('broch ure').style.dis play = 'none';}
[/CODE]

should be:
[CODE=javascript]
if (this.value == 'Brochure') {
document.getEle mentById('broch ure').style.dis play = 'block';}
else {
document.getEle mentById('broch ure').style.dis play = 'none';}

[/CODE]

what u were doing was making value equal Brochure, test if brochure wasn't false and it isn't. You have to use the double equal sign, this will indicate that are testing to see if they equal and not store the value.

good luck

[pimpmaster]

It works splendidly!

Thanks for correcting my amateur JS ;-)