gömma visa lager

Jag har en sida som ser ut ungefär så här:

<form>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr> 
    <td><select name="select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select></td>
  </tr>
  <tr> 
    <td><textarea name="a_1" id="a_1"></textarea> 
      <textarea name="a_2" id="a_2"></textarea> 
      <textarea name="3" id="a_3"></textarea></td>
  </tr>
  <tr> 
    <td><div id="1">1</div><div id="2">2</div><div id="3">3</div></td>
  </tr>
  <tr> 
    <td><textarea name="b_1" id="b_1"></textarea> 
      <textarea name="b_2" id="b_2"></textarea> 
      <textarea name="b_3" id="b_3"></textarea></td>
  </tr>
</table>
</form>

Jag är på jakt efter ett script som döljer följande:
a_2, a_3, b_2, b_3, div 2 och 3
när man sen ändrar i select till 2 så ska
a_2, b_2 samt div 2 visas och resten döljas
och ändrar man till 3 så ska 3:orna visas och resten döljas

någon som kan hjälpa mig?

Så här kanske:

<script type="text/javascript">
<!--

var nodes = null;

function showHide( n ){
	for( var i=0; i < nodes.length; i++ ){
		if( ( nodes[ i ].name && nodes[ i ].name.toString().indexOf( n ) != -1 ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( n ) != -1 ) )
			nodes[ i ].style.visibility = "visible";

		if( ( nodes[ i ].name && nodes[ i ].name.toString().indexOf( n ) == -1 && nodes[ i ].name.toString() != "select" ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( n ) == -1 ) && nodes[ i ].style.visibility == "visible" )
			nodes[ i ].style.visibility = "hidden";
	}
};

window.onload = function(){
	nodes = ( document.all ) ? document.forms[ "foo" ].all : document.forms[ "foo" ].getElementsByTagName( "*" );

	for( var i=0; i < nodes.length; i++ ){
		if( ( nodes[ i ].name && ( nodes[ i ].name.toString().indexOf( "1" ) == -1 && nodes[ i ].name.toString() != "select" ) ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( "1" ) == -1 ) )
			nodes[ i ].style.visibility = "hidden";

		else if( ( nodes[ i ].name && nodes[ i ].name != "select" ) || nodes[ i ].id )
			nodes[ i ].style.visibility = "visible";
	}
};

//-->
</script>

...

<form name="foo">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr> 
    <td><select name="select" onchange="showHide(this.selectedIndex+1)">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select></td>
  </tr>
  <tr> 
    <td><textarea name="a_1" id="a_1"></textarea> 
      <textarea name="a_2" id="a_2"></textarea> 
      <textarea name="3" id="a_3"></textarea></td>
  </tr>
  <tr> 
    <td><div id="1">1</div><div id="2">2</div><div id="3">3</div></td>
  </tr>
  <tr> 
    <td><textarea name="b_1" id="b_1"></textarea> 
      <textarea name="b_2" id="b_2"></textarea> 
      <textarea name="b_3" id="b_3"></textarea></td>
  </tr>
</table>
</form>

Notera att jag givit formuläret ett namn ("foo").

:)

Exakt så vill jag ha det fast rutorna i varje "grupp" ska ligga på samma ställe, förmodar att man måste använda <div> då, hur gör man då?

Nej, det räcker med att byta ut alla:

- "visibility" mot "display"
- "visible" mot "block"
- "hidden" mot "none"

Klipp ut och klistra in ;)

<script type="text/javascript">
<!--

var nodes = null;

function showHide( n ){
	for( var i=0; i < nodes.length; i++ ){
		if( ( nodes[ i ].name && nodes[ i ].name.toString().indexOf( n ) != -1 ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( n ) != -1 ) )
			nodes[ i ].style.display = "block";
		if( ( nodes[ i ].name && nodes[ i ].name.toString().indexOf( n ) == -1 && nodes[ i ].name.toString() != "select" ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( n ) == -1 ) && nodes[ i ].style.display == "block" )
			nodes[ i ].style.display = "none";
	}
};

window.onload = function(){
	nodes = ( document.all ) ? document.forms[ "foo" ].all : document.forms[ "foo" ].getElementsByTagName( "*" );

	for( var i=0; i < nodes.length; i++ ){
		if( ( nodes[ i ].name && ( nodes[ i ].name.toString().indexOf( "1" ) == -1 && nodes[ i ].name.toString() != "select" ) ) || ( nodes[ i ].id && nodes[ i ].id.toString().indexOf( "1" ) == -1 ) )
			nodes[ i ].style.display = "none";
		else if( ( nodes[ i ].name && nodes[ i ].name != "select" ) || nodes[ i ].id )
			nodes[ i ].style.display = "block";
	}
};

//-->
</script>

:)

Tack det funkar utmärkt men....
Exemplet ovanför var bara ett exempel :e
Mina fält heter:
Page_Text_SE
Page_Text_EN
Page_Text_FI

Page_Keywords_SE
Page_Keywords_EN
Page_Keywords_FI

<div>:
SE
EN
FI

Övriga fält ska inte beröras.
Har bifogat en fil...

Vad tror du om detta? ( Bifogar en fil )

:)

Ahh, du e ju kung på det här, tackar och bockar! :e
btw, vilka begränsningar i webbläsare har scriptet?

Det *skall* fungera i IE4 och uppåt, Netscape 6 och uppåt, Mozilla, samt Opera 7.

Jag har gjort en liten ändring, så du kan använda det nu bifogade exemplet istället.

:)