<form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>Category 1</option> <option selected="selected">Category 2</option> <option>Category 3</option> </select> </label> <br /> </form> <table width="164" border="2" cellspacing="2" cellpadding="2"> <tr> <th width="374" scope="col"><a href="#" class="listennow" onclick="var w=window.open('http://site.com','mywindow','width=366,height=335,top=180,left=450,menubar=no,status=no,directories=no,copyhistory=no,location=no,toolbar=no,scrollbars=no,resizable=yes'); w.focus(); return false; ">category 2 open new windows<br /> </a></th> </tr> </table> PHP: i have this menu list and table. i want when i click category 2 this table replaced category 2 table in category 2 table i have different codes (javascript and html) please help, thanks.
I would create all of the tables first, then hide them with css, display:none; Then create a javascript event which when a user chooses a value from the dropdown box it calls your function and sets the table requested to display:block;
Hi, Is it something like this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script type="text/javascript"> [COLOR="#FF0000"] function onchangef(me){ var tables = document.getElementById("tables").getElementsByTagName("table"); for (var i=0; i<tables.length; i++){ if (i != me.selectedIndex){ tables[i].style.display = "none"; } else{ tables[i].style.display = "table"; } } } [/COLOR] </script> </head> <body> <form id="form1" name="form1" method="post" action="" > <label> <select name="select" id="select"[COLOR="#FF0000"] onchange="onchangef(this)"[/COLOR]> <option>Category 1</option> <option selected="selected">Category 2</option> <option>Category 3</option> </select> </label> <br /> </form> [COLOR="#FF0000"]<div id="tables">[/COLOR] <table width="164" border="2" cellspacing="2" cellpadding="2" [COLOR="#FF0000"]style="display:none"[/COLOR]> <tr> <th width="374" scope="col"><a href="#" class="listennow" onclick="var w=window.open('http://www.google.com','mywindow','width=366,height=335,top=180,left=450,menubar=no,status=no,directories=no,copyhistory=no,location=no,toolbar=no,scrollbars=no,resizable=yes'); w.focus(); return false; ">category 1 open new windows<br /> </a></th> </tr> </table> <table width="164" border="2" cellspacing="2" cellpadding="2"> <tr> <th width="374" scope="col"><a href="#" class="listennow" onclick="var w=window.open('http://site.com','mywindow','width=366,height=335,top=180,left=450,menubar=no,status=no,directories=no,copyhistory=no,location=no,toolbar=no,scrollbars=no,resizable=yes'); w.focus(); return false; ">category 2 open new windows<br /> </a></th> </tr> </table> <table width="164" border="2" cellspacing="2" cellpadding="2"[COLOR="#FF0000"] style="display:none"[/COLOR]> <tr> <th width="374" scope="col"><a href="#" class="listennow" onclick="var w=window.open('http://www.yahoo.com','mywindow','width=366,height=335,top=180,left=450,menubar=no,status=no,directories=no,copyhistory=no,location=no,toolbar=no,scrollbars=no,resizable=yes'); w.focus(); return false; ">category 3 open new windows<br /> </a></th> </tr> </table> [COLOR="#FF0000"]</div>[/COLOR] </body> </html> Code (markup): Comment: It is a good practice to avoid using <table>, if the content of it is just a link