Home > WebEOC > Admin Guide > Board Building Tips > Trigger Show/Hide Function with a Drop-down List

Trigger Show/Hide Function with a Drop-down List

Table of contents
No headers

To hide a row or cell by default on load, you need to make sure to add the <style> attribute to the <tr> or <td> with a value of <display:none>. To change this with JavaScript, add an <id> attribute. The value for the ID can be whatever you desire.

Additionally, you must call a JavaScript function to change the value of the style attribute. This can be done with an <onchange> attribute in the drop-down field. The JavaScript function can interact with the <tr> or <td> because you have give it an ID. If the <selectedIndex> text of the drop-down field matches your parameters, the hidden <tr> appears.

In your HTML code, add the following for the drop-down list used to run the script:

<input type="text" name="thelistfieldname" list="webeoc list" onchange="showThis()"/>

In your HTML code, indicate the row you wish to conditionally show:

<tr id="id given to the tr tag you wish to show/hide" style="display:none">
     <td>
     </td>
</tr>

For your JavaScript block, add the following:

<script type="text/javascript">
function showThis()
{
var theList = document.forms[0].thelistfieldname;  //thelistfieldname needs to be your list field name
if(theList.options[theList.selectedIndex].text=='Text that you want to use to run the script')  //checks to see if the dropdown list item you desire is chosen.
{
document.getElementById('id given to the tr tag you wish to show/hide').style.display ='';
//changes the style attribute value in the tr tag from display:none to being visible.
}
else
{
document.getElementById('id given to the tr tag you wish to show/hide').style.display ='none';//changes/keeps the style attribute value in the tr tag to/at display:none.
}
{
</script>
You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.