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
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
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
or example like this Select Country > state > model > tourist place India > Delhi > agra > tajmahal like this . any one can help me