AJAX - select list and dynamic content

Hello,
I some speak English, but I think you understand me. I must to do list (select) with three options. When one option will selected, the text, which is belowe this list shuld to be change without reload of all page. To better you understand me, look at this code:

  <tr>
    <td valign="top" style="padding-bottom:12px ">
		<form action="" method="get" id="f3" style="size:auto; padding:0px; margin:12 0 0 12px;">
		<table width="140" border="0" cellspacing="0" cellpadding="0">
			  <tr>
				<td valign="top" width="117px">
[B]					<select name="">
						<option selected>Option 1</option>
						<option selected>Option 2</option>
						<option selected>Option 3</option>
					</select>[/B]
				</td>
				<td valign="top" style="background:url(images/go2.gif) top left no-repeat "><br style="line-height:1px "><a href="#" style="font-weight:bold; color:#FFFFFF; margin-left:4px; font-size:9px" onClick="document.getElementById('f2').submit()">OK</a></td>
			  </tr>
			</table>

		</form>
		<table width="140" border="0" cellspacing="0" cellpadding="0" class="m2">
  <tr>
 [B][I]Text 1 (when is selected Option 1)

 Text 2 (where is selected Option 2)   

 Text 3 (where is selected option 3)[/I][/B]
  </tr>
  
</table>

	</td>
  </tr>

Code (markup):

I dont' know AJAX and JS, so please give me the code, if you can.

Please help!

 

Here is some code you could use:
http://www.dhtmlgoodies.com/scripts/ajax-chained-select/ajax-chained-select.html

 

How to modifity this code to chage text, not options in select?

 

Please answer!

 

Following code shud work.

<script>
function changeDivDisplay(id)
{
   if(id == "")
     return;
   div1 = document.getElementById("text1");
   div3 = document.getElementById("text2");
   div3 = document.getElementById("text3");

   if(id == "1")
   {
       div1.style.display = "block";
       div2.style.display = "none";
       div3.style.display = "none";
   }
   else if(id == "2")
   {
       div1.style.display = "none";
       div2.style.display = "block";
       div3.style.display = "none";
   }
   else if(id == "3")
   {
       div1.style.display = "none";
       div2.style.display = "none";
       div3.style.display = "block";
   }
}
</script>

<select onchange="changeDivDisplay(this.value)">
<option value="">Select from list<option>
<option value="1">Option 1<option>
<option value="2">Option 2<option>
<option value="3">Option 3<option>
</select>

<span id="text1" style="display:none;">Text 1 (when is selected Option 1)></span>
<span id="text2" style="display:none;">Text 2 (where is selected Option 2)</span>
<span id="text3" style="display:none;">Text 3 (where is selected option 3)</span>

Code (markup):

I have not tested it, if you get error please let me know, i will try to fix it.

 

@designcode: thanks very much. I'm not sure if I paste this code in good places, but it's some errors. This code works only for first option (wher i select Option 1, it showns Text 1, byt when I select Option 2, it shows no any text )
-------
Edit


I found this error! (in line 7 is repeat "div3" buty shuld be div2).

But is also one small problem. Options in select list isn't one belowe another, but it's empty lines:

- Select from list
[empty line]
- Option 1
[empty line]
- Option 2
[empty line]
- Option 3
[empty line]

How delete empty lines???

---

Edit2

Next question:
How to do Option 1 and Text 1 as default? When I delete line "<option value="">Select from list<option>", Option 1 is default, but there is nowhere Text 1!

 

Ok please try the following code,

<script>
function changeDivDisplay(id)
{
   if(id == "")
     return;
   div1 = document.getElementById("text1");
   div2 = document.getElementById("text2");
   div3 = document.getElementById("text3");

   if(id == "1")
   {
       div1.style.display = "block";
       div2.style.display = "none";
       div3.style.display = "none";
   }
   else if(id == "2")
   {
       div1.style.display = "none";
       div2.style.display = "block";
       div3.style.display = "none";
   }
   else if(id == "3")
   {
       div1.style.display = "none";
       div2.style.display = "none";
       div3.style.display = "block";
   }
}
</script>

<select onchange="changeDivDisplay(this.value)">
<option value="1">Option 1<option>
<option value="2">Option 2<option>
<option value="3">Option 3<option>
</select>

<span id="text1" style="display:block;">Text 1 (when is selected Option 1)></span>
<span id="text2" style="display:none;">Text 2 (where is selected Option 2)</span>
<span id="text3" style="display:none;">Text 3 (where is selected option 3)</span>

Code (markup):

Please let me know if you still have errors and problems.

 

Now it works, bu how delete empty lines?

Edit:
Question above is not important. I must insert as text 1, text 2 and text 2 HTML code with tags <table>, <tr>, <td> etc., but it doesn't work in SPAN.

 

Oh oh sorry, my mistake please use following code and it will surely work,

<script>
function changeDivDisplay(id)
{
   if(id == "")
     return;
   div1 = document.getElementById("text1");
   div2 = document.getElementById("text2");
   div3 = document.getElementById("text3");

   if(id == "1")
   {
       div1.style.display = "block";
       div2.style.display = "none";
       div3.style.display = "none";
   }
   else if(id == "2")
   {
       div1.style.display = "none";
       div2.style.display = "block";
       div3.style.display = "none";
   }
   else if(id == "3")
   {
       div1.style.display = "none";
       div2.style.display = "none";
       div3.style.display = "block";
   }
}
</script>

<select onchange="changeDivDisplay(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<span id="text1" style="display:block;">Text 1 (when is selected Option 1)></span>
<span id="text2" style="display:none;">Text 2 (where is selected Option 2)</span>
<span id="text3" style="display:none;">Text 3 (where is selected option 3)</span>

Code (markup):

If you find this post helping, please add it to my reputation
Enjoy

 

Thanks. Now ewerything works very well.

 

You need to set the ids of those td, tr or table. Copy Paste your code here so that I can help you

 

Hi !

You can read my post on my website to get a working example of 3 linked list with Ajax : http://www.vincentroye.com/?p=339
Continent -> Country -> City
Easy and intuitive

Cheers,

Vincent Roye.

 

Hi

any one help me pls here

I want similar like this

For example

I want to show all Tourist places in my country


List : Of State

Agra
Andrapradesh
etc 1
ect 2

If people select Agra . need to Shows text For example like as . Tourist Place : taj mahal
If people select andrapradesh . need to Shows text For example like as . Tourist Place : tirupathi temple



please help me . thanks a lot

 

Any Body please Help me .. any demo Script for my above post

 

or example like this


Select Country > state > model > tourist place
India > Delhi > agra > tajmahal

like this . any one can help me

 

no body not here to help my request