Javascript: Update select box based on multiple options from another select box

Lori713 · 01-Feb-2008, 03:05 PM #1

Hello,

I'm trying to create a menu where there is initially one select box (Funding Group) displayed with approximately 10 options available depending on what's in the database table.

I want another text box (Program) to be displayed, but only where the program codes have a Funding Group that was selected in the first box BUT have no duplicate program codes (see below for explanation).

For instance, there are fund groups A0, B0, C0, etc. The program table in the database might contain some rows that look like this:

Code:

Fund_Group   Prog_Code   Prog_Descr
A0           101         Fred          [so, prog code 101 has more than one fund]
A0           102         Ethel
B0           101         Fred          [so, prog code 101 has more than one fund]
C0           203         Ricky

If the user selects Funding Groups A0 and B0, the Program box might initially contain this: [note the funding group and program code are concatenated in the value field --- I'm thinking this will help me determine which ones to add/remove]

Code:

value       text
A0~101   101 - Fred
A0~102   102 - Ethel
B0~101   101 - Fred

[Note: the customer doesn't want to see Fred listed twice but I will worry about removing the duplicate entry for program 101 later... right now I'm trying to generate a box that contains only valid entries even if they are duplicated initially]

Whew! I think the functional description of the problem will end up taking more lines than the actual coding itself.

I have already run across problems with Internet Explorer rudely ignoring my attempts to hide or otherwise add/remove options in a select box. My Googling (over the last FOUR days) has resulted in a lot of old pages that frankly leave me more and more confused about the best approach. The company where I work has designated Internet Explorer 7.0 as the company-supported browser, but I know that I have customers that use other browsers so I need to make sure this works in other (major) browsers as well.

My question is about which would be the best method to achieve the desired results:

1) Have the Program box fully populated on the page load and then remove items that don't match what the user selected using the Continue button to fire off the removal of unwanted items?

2) Dynamically add items to the Program box based on some hidden array of values I have squirreled away somewhere (and thus allows me to check to see if there are duplicates before adding the option)?

3) And the dreaded third option I'm trying desperately to avoid: make the menu recursive and take the values from Funding Group and go search the database for matching (but DISINCT) values in the Program table, and then update the menu again. (UGH... already been down this path and someone suggested letting Javascript create what I want after I grab all values). I shudder to think (based on what I've read) about passing variables and making the form sticky, etc.

Other notes that might be worth mentioning: There will be other boxes on the menu that will work the same way (i.e., a Class box that is based on the Funding Group also; a Department Level box based on which departments were selected). Even fully populated, the most any one box might contain is less than 1000 rows. I'm using Perl and Oracle SQL.

Below is a working page that I'm using to test my theories. I stripped out most non-essential stuff but hopefully have left everything in working order. Any suggestions on how best to approach this would be appreciated. I'm also happy to provide more information/clarification if needed. Thanks!

Lori [who is now going to go get a MUCH needed drink after reading page after page of suggestions all week on how to do this].

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>WRS Main Menu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body        { font-family:Arial; color:black; font-size:small; background:#F7F3D9; }
form        { margin: 0em; }
hr          { width:100%; color:#D3D3D3; }
.link       { white-space:nowrap; color:#B22222; text-align:left; }
.section    { font-weight:bold; color:#B22222; background:#DCDCDC; text-align:center; }
.tbar       { font-weight:bold; color:white; background:#B22222; width:100%; }
td.tbl      { border-top:.3mm solid gray; border-left:.3mm solid gray;
              padding:0em .5em 0em .5em; white-space:nowrap; }
tr.tbl      { border-top:.3mm solid gray; border-left:.3mm solid gray;
              padding:0em .5em 0em .5em; background:#DCDCDC; font-weight:bold; }
th          { padding:0mm 2mm 0mm 2mm; }
.hide       { white-space:nowrap; display:none; }
.bold       { white-space:nowrap; font-weight:bold; }
.norm       { white-space:nowrap; }
.total      { font-weight:bold; background:#DCDCDC; }
.redcell    { color:#B22222; border-color:#B22222; background:#B22222; }
.redboldctr { color:#B22222; font-size:medium; font-weight:bold; text-align:center; }
.redbold    { color:#B22222; font-size:medium; font-weight:bold; }
.vert       { vertical-align:top; }
</style>
</head>

<body onload="hideShowInitial('14_summary');">

<form name="form_main" method="post" action="ncw_summ_rpt14.pl">

<table class="bold" width="100%" border="0" summary="">
<tr><td class="section" colspan="3">Step&nbsp;1:&nbsp;&nbsp;Select Report / Link</td></tr>

<tr><td style="text-align:center; text-decoration:underline;">Reports</td></tr>
<tr><td>
<input type="radio" name="rpt_id" value="14_summary" id="rpt_id14"
       style="cursor:pointer;"
       onclick="hideShowInitial(this.value);
                action='ncw_summ_rpt14.pl';" checked='checked' />
       <label for="rpt_id14">14 - BMS by Account Detail</label>
</td></tr>
</table>

<table class="bold" width="100%" border="0" summary="">
<tr><td class="section" colspan="4">Step&nbsp;2:&nbsp;&nbsp;Select / Enter Criteria</td></tr>
<tr id="rpt14_row1" name="rpt14_row1">
<td class="vert" width="25%">
  <label for="unit2" name="unit1" id="unit1">Unit / College:</label></br>
  <select name="unit2" id="unit2" multiple size="5" onchange="hidedeptbreakdown();">
  <option value="xxx" selected="selected">-- Select Unit / College --</option>
  <option value="ALL">ALL</option>
  <option value="01">01 - Chancellor</option>
  <option value="02">02 - Vice Chancellor/Provost</option>
  <option value="03">03 - Capital Improvement Control</option>
  <option value="04">04 - Graduate School</option>
  <option value="05">05 - Student Affairs</option>
  <option value="06">06 - Research</option>
  <option value="07">07 - McKimmon Ctr-Ext&Cont Ed</option>
  <option value="08">08 - University Advancement</option>
  <option value="09">09 - Ext, Engagement & Econ Develop</option>
  <option value="10">10 - Athletics</option>
  </select></td>

<td class="vert" width="25%">
  <label for="fund2" name="fund1" id="fund1">Funding Group:</label></br>
  <select name="fund2" id="fund2" multiple size="5">
  <option value="xxx" selected="selected">-- Select Funding Group --</option>
  <option value="ALL">ALL</option>
  <option value="A0">16030 - Academic Affairs</option>
  <option value="B0">16031 - Agricultural Research</option>
  <option value="C0">16032 - Cooperative Extension</option>
  <option value="D0">Agency Funds</option>
  <option value="E0">Auxiliary Sales and Service</option>
  <option value="F0">Capital Improvements</option>
  <option value="G0">Contracts and Grants</option>
  <option value="H0">Debt Service</option>
  <option value="I0">Endowments</option>
  <option value="J0">F and A Receipts</option>
  <option value="K0">Foundations</option>
  <option value="L0">Foundations - Other</option>
  <option value="M0">Gifts and Loan Funds</option>
  </select></td>

<td class="vert" width="25%"><label for="dpta2" name="dpta1" id="dpta1">Department Breakdown:</label></br>
  <select name="dpta2" id="dpta2" size="3">
  <option value="2">Select Department Breakdown</option>
  <option value="4" selected="selected">4 Digit</option>
  <option value="6">6 Digit</option>
  </select></td>

<td class="vert" width="25%">
<a href="xlori_dummy.pl" id="bmshelp" name="bmshelp" target="_blank"
   style="color:#B22222; white-space:nowrap;">Chartfield Criteria Menu Help</a></br></br></br>
<input type="button" name="bmscont" id="bmscont" value="Continue"
       onclick="hideShowContinue('14_summary');"/>
<input type="reset" name="reset" id="reset" value="Reset" />
</td>
</tr>

<tr id="rpt14_row2" name="rpt14_row2">
<td><label for="prog2" name="prog1" id="prog1">Program Code:</label></br>
  <select name="prog2" id="prog2" multiple size="5">
  <option value="ALL" selected="selected">ALL</option>
  <option value="A0101">101 - Regular Term Instruction</option>
  <option value="A0102">102 - Summer Term Instruction</option>
  <option value="A0103">103 - Extension Instruction/Non-Cred</option>
  <option value="B0101">101 - Regular Term Instruction</option>
  <option value="B0110">110 - Organized Research</option>
  <option value="B0121">121 - Administration</option>
  <option value="C0110">110 - Organized Research</option>
  <option value="C0122">122 - Research</option>
  <option value="C0123">123 - Research Stations</option>
  <option value="D0101">101 - Regular Term Instruction</option>
  <option value="D0102">102 - Summer Term Instruction</option>
    </select></td>
</tr>
</table>
</form>

<script type="text/javascript"> <!--
var fundGroupSelected = new Array();

//  Show/hide functions related to various reports on the Main Menu.

function hideShowInitial(value)
{
var rptid2=value;
if  ( rptid2 == "14_summary" )
    {
      document.form_main.unit2.selectedIndex = 0;
      document.form_main.fund2.selectedIndex = 0;
      document.form_main.dpta2.selectedIndex = 1;
      document.form_main.bmscont.focus();

      document.form_main.unit2.disabled = false;
      document.form_main.fund2.disabled = false;
      document.form_main.dpta2.disabled = false;
    }
}


function hideShowContinue(value)
{
var rptid2 = value;
var myOption = "default";

if      ( rptid2 == "14_summary" && document.form_main.unit2.selectedIndex == 0 &&
          document.form_main.fund2.selectedIndex == 0 )
        { alert('You must select a Unit/College and Funding Group to proceed.');
          myOption = "Missing";
          document.form_main.action='';
          return false;
        }
else if ( rptid2 == "14_summary" && document.form_main.unit2.selectedIndex == 0 )
        { alert('You must select a Unit/College to proceed.');
          myOption = "Missing";
          document.form_main.action='';
          return false;
        }
else if ( rptid2 == "14_summary" && document.form_main.fund2.selectedIndex == 0 )
        { alert('You must select a Funding Group to proceed.');
          myOption = "Missing";
          document.form_main.action='';
          return false;
        }

for ( var i = 0; i < document.form_main.fund2.options.length; i++ )
      if ( document.form_main.fund2.options[i].fundGroupSelected )
         { fundGroupSelected.push(document.form_main.fund2.options[i].value);
           document.form_main.loritest.value = fundGroupSelected;
         }

for ( var i = 0; i < document.form_main.prog2.options.length; i++ )
      if ( document.form_main.prog2.options[i].masterProgList )
         { masterProgList.push(document.form_main.prog4.options[i].value);
         }

if    ( rptid2 == "14_summary" && myOption != "Missing" )
      { updateProg2Box(); showprog();
      }
else  { return false;
      }
}



function updateProg2Box()
{
// Using each funding group selected, determine which options need to be removed.
for ( var i = 0; i < document.form_main.prog2.options.length; i++ )
      if ( document.form_main.fund2.options[i].fundGroupSelect )
         {

//   no clue what/where/how to get started on this

         }


}


function hidedeptbreakdown()
// This function is invoked if a customer selects ALL from the Unit/College box.
{
unitChoice = document.form_main.unit2.options.selectedIndex;

// If they choose ALL from the Unit/College box, hide the Department Breakdown
// box and hide the 4-digit and 6-digit level options in the Department Level box.
if      ( unitChoice == 1 ) { document.form_main.dpta2.selectedIndex = 0;
                              hidedpta();
                              document.form_main.lvel2.selectedIndex = 1;
                              //document.form_main.sort2.disabled = true;
                            }
else if ( unitChoice != 1 ) { showdpta(); }
}

// The "hide" functions hide the objects on the Main Menu.
function hideprog()
{
cells=document.getElementsByName('prog1');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='none') ? 'none':'none')}
cells=document.getElementsByName('prog2');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='none') ? 'none':'none')}
}

function hidereset()
{
cells=document.getElementsByName('reset');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='none') ? 'none':'none')}
}


// The "show" functions show the objects on the Main Menu.
function showdpta()
{
cells=document.getElementsByName('dpta1');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='') ? '' : '') }
cells=document.getElementsByName('dpta2');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='') ? '' : '') }
}

function showprog()
{
cells=document.getElementsByName('prog1');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='') ? '' : '') }
cells=document.getElementsByName('prog2');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='') ? '' : '') }
}

function showreset()
{
cells=document.getElementsByName('reset');
for ( j = 0; j < cells.length; j++ )
    { cells[j].style.display=( (cells[j].style.display=='') ? '' : '') }

document.form_main.unit2.disabled = true;
document.form_main.fund2.disabled = true;
document.form_main.dpta2.disabled = true;
}

function validate()
{
getRadios = document.getElementsByTagName("input");
for ( x = 0; x < getRadios.length; x++ )
    { if ( getRadios[x].type == "radio" && getRadios[x].checked )
         { radioSelected = getRadios[x].value;
         }
    }

mydeptchoice = document.form_main.dptb2.selectedIndex;
if      ( radioSelected == "14_summary" && mydeptchoice == 0 )
        { alert('You must select a Department before proceeding.');
          return false;
        }
else    { document.form_main.submitForm.value = "Processing...";
          window.status = "Processing request for Summary report... please wait.";
          return true;
        }
}
// -->
</script>
</body></html>

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)