Display rows in table on change of dropdown

ajoo · Jun 26, 2008

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.

Thanks in advance

<html>
<head>
<title>RiskClassEditor</title>

<base href="

http://sstm6490dap.stm.swissbank.com:9088/isis/riskClassEditor/rcReport.jsp">

tsuji · Jun 26, 2008

[0] Some preliminary setup.
[0.1] doit() being the handler, script shown in [1].
><SELECT NAME="mylist" onChange()>
[tt]<SELECT NAME="mylist" onChange[red]="doit()"[/red]>[/tt]
[0.1] "x" being some figurative id.
><tr class="light" id=>
[tt]<tr class="light" id=[red]"x"[/red]>[/tt]

[1] Put the onchange handler (called doit() arbitrarily) in script section inside head section, say.
[tt]
<script type="text/javascript">
function doit(obj) {
var bshowall;
bshowall=(obj.selectedIndex==0);
var stxt=obj[obj.selectedIndex].text;
//index [1] is implementation specific
var otable=document.getElementsByTagName("table")[1];
var crows=otable.rows;
for (var i=1;i<crows.length;i++) {
var checkidx=crows.cells.length-1;
var rx=new RegExp("^\\s*"+stxt+"\\s*$","i");
if (bshowall || rx.test(crows.cells[checkidx].innerHTML)) {
crows.style.display="block";
} else {
crows.style.display="none";
}
}
}
</script>
[/tt]
[1.1] There are some implementation specific setting due to some lack of generic reference to get to the object, like table with index 1 (the second table in document order). It can be made slightly more generic if you assign an id to it and use document.getElementById() to reference to it. That would be details for you to improve some later time.

tsuji · Jun 26, 2008

[2] You might have to review first table. Maybe you're meant to wrap the select inside td? There is no td. Also, the width setting of it may not look good.

[3] In general, you have to review the inline styles of table. It may not be rendering well in ff. Maybe your css take care of them all, I don't know.

tsuji · Jun 26, 2008

Amendment[/i]
[0.1] I meant this.
>[self]<SELECT NAME="mylist" onChange="doit()">
[tt]<SELECT NAME="mylist" onChange="doit([red]this[/red])">[/tt]

ajoo · Jun 26, 2008

Thanks,works fine individually. When I am trying adding it to my actual code it is not working. Working on it to see why it is not working in my actual code.
Thanks for help
Can u explain what this code does
var rx=new RegExp("^\\s*"+stxt+"\\s*$","i");

tsuji · Jun 26, 2008

>Can u explain what this code does
>var rx=new RegExp("^\\s*"+stxt+"\\s*$","i");
First, it is a regular expression. If you don't know about it, google regexp. Then, it is meant to check for pattern of the whole line, case-insensitively, where after trimming out leading and trailing whitespaces is the text of the option selected.

>When I am trying adding it to my actual code it is not working.
I have mentioned with some repetition time that you've to pay attention to proper referencing the table in question. Index 1 is implementation specific. Maybe you can assign an id to it and use .getElementById(), see [1.1].

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Display rows in table on change of dropdown

ajoo

Programmer

tsuji

Technical User

tsuji

Technical User

tsuji

Technical User

ajoo

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor