Posted: Thu Jun 26, 2008 9:43 pm Post subject: Display rows in table on change of dropdown
Hi,
Does any one have a script which will display the fields in my output table based on what user selects from dropdown.
Please see html below:
Here is what I need to do. When user first loads the page they should be able to see all recods. After that when they select any value only those rows should be select. For example if user selects Active from dropdown only rows with active status should be selected.
Also if can it be done with CSS?
Thanks in advance
<html>
<head>
<title>Test</title>
Joined: 27 Feb 2008 Posts: 627 Location: Cebu City Philippines
Posted: Fri Jun 27, 2008 4:02 am Post subject: Re: Display rows in table on change of dropdown
Yes, possible, but you have to assign a new class name to to the rows which will affect the dropdown choices. This modification might work:
Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.hide{display:none;}
</style>
<script type="text/javascript">
/************Script Notification*******************
* Author: Raymond Angana
* rangana in Devppl
* Created June 27
* Title: Script to show row base on status
* This notice must stay intact for legal use
***********End of notice**************************/
window.onload=function()
{
var dropRang=document.getElementsByName('mylist')[0],trRang,def;
dropRang.onchange=function()
{
trRang=document.getElementsByTagName('tr');
def='light '; // Set previous classname
reset();
for(var i=0;i<trRang.length;i++)
{
if(trRang[i].className==def+this.value)
{
trRang[i].style.display='';
}
}
}
}
function reset()
{
var trRang=document.getElementsByTagName('tr');
for(var i=2;i<trRang.length;i++){trRang[i].style.display='none';}}
</script>
</head>
<body>
