1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

AJAX - select list and dynamic content

Discussion in 'HTML & Website Design' started by Romek, Feb 4, 2007.

  1. #1
    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!
    SEMrush
     
    Romek, Feb 4, 2007 IP
    SEMrush
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    296
    Best Answers:
    0
    Trophy Points:
    250
  3. Romek

    Romek Member

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #3
    How to modifity this code to chage text, not options in select?
     
    Romek, Feb 6, 2007 IP
  4. Romek

    Romek Member

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #4
    Please answer!
     
    Romek, Feb 8, 2007 IP
  5. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #5
    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, Feb 8, 2007 IP
    ajsa52 likes this.
  6. Romek

    Romek Member

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #6
    @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!
     
    Romek, Feb 8, 2007 IP
  7. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #7
    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.
     
    designcode, Feb 8, 2007 IP
  8. Romek

    Romek Member

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #8
    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. :(
     
    Romek, Feb 8, 2007 IP
  9. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #9
    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
     
    designcode, Feb 8, 2007 IP
  10. Romek

    Romek Member

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #10
    Thanks. Now ewerything works very well. :)
     
    Romek, Feb 9, 2007 IP
  11. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #11
    You need to set the ids of those td, tr or table. Copy Paste your code here so that I can help you :)
     
    designcode, Feb 9, 2007 IP
    moondancer likes this.
  12. vincent.roye

    vincent.roye Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    vincent.roye, Apr 27, 2010 IP
  13. oruram

    oruram Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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
     
    oruram, May 25, 2011 IP
  14. oruram

    oruram Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Any Body please Help me .. any demo Script for my above post
     
    oruram, May 26, 2011 IP
  15. oruram

    oruram Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    or example like this


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

    like this . any one can help me
     
    oruram, May 26, 2011 IP
  16. oruram

    oruram Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    no body not here to help my request
     
    oruram, Jun 6, 2011 IP