PDA

View Full Version : Chained select menu second level list problem



valedaw2
11-18-2009, 04:17 PM
1) Script Title: Chained select menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

3) Describe problem: I am populating the first level of the chained select menu based on a parameter passed in the url. That is working fine, but the second level dropdown is not populating correctly, however, it works fine if I manually select from the first level dropdown.

my config file:


//var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="goto" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.

var newwindow=0 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "Select a subject", "", 1); //HEADER OPTION
addList("First-Select", "General Info", "", "General"); //HEADER OPTION
addList("First-Select", "Borrower Info", "", "Borrower");
addList("First-Select", "Lender Info", "", "Lender");
addList("First-Select", "Career Info", "", "Career");
addList("First-Select", "Media Kit Info", "", "Media");


addOption("General", "Select a subject", "", 1); //HEADER OPTION
addList("General", "How to subscribe to PayNet", "How to subscribe to PayNet");
addList("General", "PayNet analytical capabilities", "PayNet analytical capabilities");
addList("General", "PayNet predictive capabilities", "PayNet predictive capabilities");
addList("General", "Types of reports offered by PayNet", "Types of reports offered by PayNet");
addList("General", "Scores offered by PayNet", "Scores offered by PayNet");
addList("General", "Guidelines regulating PayNet", "Guidelines regulating PayNet");//END OF THIS NODE
addList("General", "General Information about PayNet", "General Information about PayNet");
addList("General", "Other", "Other");//END OF THIS NODE

addOption("Borrower", "Select a subject", "", 1); //HEADER OPTION
addList("Borrower", "Request own Credit History Report", "Request own Credit History Report");
addList("Borrower", "Cost to receive own Credit History Report", "Cost to receive own Credit History Report");
addList("Borrower", "Dispute pay history on the Credit History Report", "Dispute pay history on the Credit History Report");
addList("Borrower", "Dispute other entities on the Credit History Report", "Dispute other entities on the Credit History Report");
addList("Borrower", "Understanding the Credit History Report", "Understanding the Credit History Report");
addList("Borrower", "Commercial credit vs. consumer credit", "Commercial credit vs. consumer credit");
addList("Borrower", "Dispute other entities on the Credit History Report", "Dispute other entities on the Credit History Report");
addList("Borrower", "Understanding the Credit History Report", "Understanding the Credit History Report");
addList("Borrower", "Contract history reporting timeframe", "Contract history reporting timeframe");
addList("Borrower", "Negative incident reporting timeframe", "Negative incident reporting timeframe");
addList("Borrower","Other", "Other");

addOption("Lender", "Select a subject", "", 1); //HEADER OPTION
addList("Lender", "PayNet data sources", "PayNet’s data sources", "PayNet’s data sources");
addList("Lender", "How PayNet scores are derived", "How PayNet’s scores are derived");
addList("Lender", "Performance of PayNet’s scores", "Performance of PayNet’s scores");
addList("Lender", "PayNet analytical capabilities", "PayNet’s analytical capabilities");
addList("Lender", "PayNet predictive capabilities", "PayNet’s predictive capabilities");
addList("Lender", "Understanding the Credit History Report", "Understanding the Credit History Report");
addList("Lender", "Log-in assistance request", "Log-in assistance request");
addList("Lender", "Dispute resolution process", "Dispute resolution process");
addList("Lender", "PayNet member list", "PayNet member list");
addList("Lender", "Contract history reporting timeframe", "Contract history reporting timeframe");
addList("Lender", "Negative incident reporting timeframe", "Negative incident reporting timeframe");
addList("Lender", "Data security", "Data security");
addList("Lender", "Other", "Other");

addOption("Career", "Application and/or resume submission", "", 1); //HEADER OPTION
addList("Career", "Other", "Other");

addOption("Media", "Media Kit Request", "", 1); //HEADER OPTION
addList("Media", "Other", "Other");

HTML code:
Header - I read the input parameter and set the index for the first level form


<script type="text/javascript">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
window.onload = function() {
setupDependencies('infoForm'); //name of form(s). Seperate each with a comma (ie: 'genlOptions', 'myotherform' )
initListGroup('chainedmenu', document.infoForm.firstlevel, document.infoForm.secondlevel, 'savestate');
// alert("window onload");

//alert(formOpt);
if (formOpt == "genlOpt")
{
document.getElementById("firstlevel").selectedIndex=1;
} else {
if (formOpt == "careerOpt")
{
document.getElementById("firstlevel").selectedIndex=4;

}
}
}

</script>

<script type="text/javascript">
function setSubj()
{
initListGroup('chainedmenu', document.infoForm.firstlevel, document.infoForm.secondlevel, 'savestate');
// alert("setSubj");

alert(formOpt);

if (document.getElementById("borrower").checked == true)
{
document.getElementById("firstlevel").selectedIndex=2;

} else {
if (document.getElementById("lender").checked == true)
{
document.getElementById("firstlevel").selectedIndex=3;
}else {
if (document.getElementById("mediaOpt").checked == true)
{
document.getElementById("firstlevel").selectedIndex=5;
} else {
if (document.getElementById("othr").checked == true)
{
document.getElementById("firstlevel").selectedIndex=6;
}
}
}
}
}
</script>

If the following fields are clicked, the first level dropdown is reset


<label><strong>Are you a: Member Lender</strong><a href="#" class="hintanchor" onmouseover="showhint('A member of an organization that subscribes to and utilizes PayNet’s services.', this, event, '150px')">(?)</a>
<input id="lender" type="radio" name="custO" class="DEPENDS ON os BEING custOpt" value="lender" onclick="setSubj()"/>
</label>
<label><strong>&nbsp;&nbsp;&nbsp;Borrower</strong><a href="#" class="hintanchor" onmouseover="showhint('An organization or sole proprietor seeking financing from one of PayNet’s Member Lenders.', this, event, '150px')">(?)</a>
<input id="borrower" type="radio" name="custO" value="borrower" class="DEPENDS ON os BEING custOpt" onclick="setSubj()"/></label>
<label><strong>&nbsp;&nbsp;&nbsp;Other</strong><a href="#" class="hintanchor" onmouseover="showhint('An organization or sole proprietor that does not fit the profile of a Member Lender or a Borrower.', this, event, '150px')" >(?)</a><input id="othr" type="radio" name="custO" value="othr" class="DEPENDS ON os BEING custOpt" onclick="setSubj()"/></label>


Here if the menu declaration:


<label>
<select name="firstlevel" id="firstlevel" class="DEPENDS ON custO BEING lender OR custO BEING borrower OR custO BEING othr OR os BEING genlOpt OR medOpt BEING hrdCpy OR os BEING careerOpt" >
</select>
<strong><span class="requiredField">*</span></strong><strong>Subject Line</strong></label>
<label><select name="secondlevel" id="secondlevel" value="" class="DEPENDS ON custO BEING lender OR custO BEING borrower OR custO BEING othr OR os BEING genlOpt OR medOpt BEING hrdCpy OR os BEING careerOpt"></select></label>
</div><br />

<label>