Dynamic Select Box with Sub Select

I need help to find out why my coe does not load the sub select item when I have told it which primary item has been selected. The code works if you click the category and shows the sub-Category. However I need it to show the sub categories of the category selected on load. Viw the Initmake at the bottom of the form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
 
<script language="javascript">
var regionJoin = "Agricultural|1|Agribusiness~1~Agricultural~14~Pasture/Ranch~2~Timberland~3|Health Care|2|Acute Care Hospital~4|Hotel & Motel|5|Economy/Limited Space~23~Full Service~24|Industrial|3|Distribution Warehouse~46~Flex Space~5~Industrial Condominium~7~Industrial-Business Park~6~Manufacturing~8~Office Showroom~9~R&D~10~Refrigerated/Cold Storage~47~Self/Mini-Storage Facility~11~Truck Terminal/Hub/Transit~12~Warehouse~13|Land|4|Commercial/Other (Land)~21~Industrial (Land)~15~Leased Land~22~Multifamily (Land)~16~Office (Land)~17~Residential (Land)~18~Retail (Land)~19~Retail-Pad (Land)~20|MultiFamily|6|Duplex/Triplex/Fourplex~29~Garden/Low-Rise~25~Government Subsidized~26~Mid/High-Rise~27~Mobile Home/RV Community~28|Office|7|Institutional/Governmental~31~Medical Office~32~Office Building~30~Office Condo~48~Office-Business Park~33~Office-R&D~34~Office-Warehouse~35|Retail|8|Anchor~45~Day Care Facility/Nursery~36~Free Standing Bldg~40~Post Office~37~Restaurant~38~Retail (other)~43~Retail Pad~44~Service/Gas Station~39~Street Retail~41~Vehicle Related~42|Senior Housing|9|Assisted Living Residences~49~Congregate Senior Housing~50|Shopping Center|10|Community Center~51~Neighborhood Center~54~Outlet Center~55~Power Central~56~Regional Center/Mall~57~Specialty Center~53~Strip Center~52~Super Regional Center~58~Theme/Festival Center~59|Special Purpose|11|Marina~60~Religious Facility~62~Special Purpose (Other)~61|Sport & Entertainment|13|Golf Related~63~Theatre/Performing Arts~64";
var propertyJoin = "";
</script>
</head>
<body>
<form method="Post" action="?" name="FilterListingsForm">
		<input type="hidden" name="AgentID" value="1">
		<input type="hidden" name="PropID" value="9">
		<h2>Property Type</h2>
		<table>
	 	  <tr>
			<td valign="top">
			<h3><b><font size="2">Main Category (Choose One)</font></b></h3>
			</td>
			<td width="25">&nbsp;</td>
			<td valign="top">
			<h3><b><font size="2">Sub Category (Choose One)</font></b></h3>
            </td>
          </tr>
	 	  <tr>
			<td valign="top"><select name="PropCat" size="11" style="border-style: inset; width: 220px; border-width: 1px; " onChange="changedMake('FilterListingsForm','PropCat','PropSubCat',0);">
				</select>
			</td>
			<td width="25"></td>
			<td valign="top"><select size="11" name="PropSubCat" style="border-style: inset; width: 230px; border-width: 1px; ">				
            	</select>
            </td>
          </tr>
         </table>
            <table cellSpacing="0" id="table6" width="511">
			<tr class="multiline">
				<td>&nbsp;</td>
				<td>&nbsp;</td>											
			</tr>
		</table>
		<div align="left">
			<p style="text-align: right">&nbsp;<p style="text-align: right">
			</form>
			<script language="JavaScript" type="text/javascript">
 var frmvalidator = new Validator("FilterListingsForm");
 frmvalidator.addValidation("PropCat","req","Please enter Property Category");
  
 frmvalidator.addValidation("PropSubCat","req","Please choose a Property Sub Category");
 
 frmvalidator.addValidation("BuildingName","req","Please enter a Property Name");
 
 frmvalidator.addValidation("Address","req","Please enter an Address");
 frmvalidator.addValidation("City","req","Please enter a City");
 frmvalidator.addValidation("State","req","Please choose a state");
 frmvalidator.addValidation("Zip","req","Please enter a ZipCode");
 </script>
 </div>
 <script language="javascript">
<!--
 
function initMake( formName, makeDropName, modelDropName, initialMakeCode, initialModelId, evd_a, menu1all, menu2all ) {
  makeDrop = document.forms[formName].elements[makeDropName];
  selMake = makeDrop.selectedIndex;
  makeDrop.length=0;
  makeDrop.options[0]=new Option(menu1all,'all');
  for (i=0;i<evd_a.length/3;i++){
    var makeName = evd_a[i*3];
    var makeCode = evd_a[i*3+1];
    makeDrop.options[i+1]=new Option(makeName,makeCode);
    if (!selMake && makeCode == initialMakeCode) {
      selMake = i+1;
    }
  }
  makeDrop.selectedIndex=selMake;
  if ( selMake > 0 ) {
    modelDrop = document.forms[formName].elements[modelDropName];
    selModel = modelDrop.selectedIndex;
    changedMake( formName, makeDropName, modelDropName, selModel, initialModelId );
  }
}
 
function changedMake( formName, makeDropName, modelDropName, selModel, initialModelId ) {
	if (initialModelId != null) {
 
		var multiSubs = initialModelId.split(',');
	}
	else {
		var multiSubs = "";
	}
	//alert(multiSubs.length);
	var evd_a = "";
	var menu2all = "";
	if (makeDropName == "PropCat") {
		evd_a = regionSplit;
		menu2all = '[all areas in region]';
	}
	if (makeDropName == "PropSubCat") {
		evd_a = propertySplit;
		menu2all = '[all property sub types]';
	}
  makeDrop = document.forms[formName].elements[makeDropName];
  modelDrop = document.forms[formName].elements[modelDropName];
  selMake = makeDrop.selectedIndex;
  modelDrop.length=0;
  modelDrop.options[0]=new Option(menu2all,'');
  if(selMake>0){
    evd_b=(evd_a[(selMake-1)*3+2]).split('~');
//    modelDrop.options[1]=new Option('[all areas in region]','all');
    for (i=0;i<evd_b.length/2;i++){
      var modelName = evd_b[i*2];
      var modelId = evd_b[i*2+1];
      modelDrop.options[i+1]=new Option(modelName,modelId);
      for (j = 0; j < multiSubs.length; j++) {
      	if (modelId == multiSubs[j].replace(' ', '')) {
      		//alert(modelId);
        	//selModel = i+1;
        	modelDrop.options[i+1].selected = true;
        }
      }
    }
  }
  //modelDrop.selectedIndex=selModel;
}
 
var regionSplit = regionJoin.split('|');
var propertySplit = propertyJoin.split('|');
 
//-->
</script>
<script language="javascript">
initMake('FilterListingsForm','PropCat','PropSubCat', '4', '21', regionSplit, '[Property Types]', '[all property types]');
initMake('FilterListingsForm','PropType','SubPropType','4', '21', propertySplit, '[all property types]', '[all property subtypes]');
</script>
</p>
</form>
</body>

Open in new window

jfergyAsked:
Who is Participating?
 
David H.H.LeeConnect With a Mentor Commented:
Hi jfergy,
If the selectedIndex is coming from database, you can amnd this line in initMake() function:
if (!selMake && makeCode == initialMakeCode) {

Change to :
if (makeCode == initialMakeCode) {

Complete changes for initialMakeCode() function:
function initMake( formName, makeDropName, modelDropName, initialMakeCode, initialModelId, evd_a, menu1all, menu2all ) {
 makeDrop = document.forms[formName].elements[makeDropName];
 
 selMake = makeDrop.selectedIndex;
  makeDrop.length=0;
  makeDrop.options[0]=new Option(menu1all,'all');
  for (i=0;i<evd_a.length/3;i++){
    var makeName = evd_a[i*3];
    var makeCode = evd_a[i*3+1];
    makeDrop.options[i+1]=new Option(makeName,makeCode);
   
   //this line
   if (makeCode == initialMakeCode) {
         selMake = i+1;    
   }
  }

  makeDrop.selectedIndex=selMake;
  if ( selMake > 0 ) {
    modelDrop = document.forms[formName].elements[modelDropName];
    selModel = modelDrop.selectedIndex;
    changedMake( formName, makeDropName, modelDropName, selModel, initialModelId );
  }
}

0
 
David H.H.LeeCommented:
Hi jfergy,
>>..I need it to show the sub categories of the category selected on load
You can spesify the selectedIndex during page load in initMake() function.

function initMake( formName, makeDropName, modelDropName, initialMakeCode, initialModelId, evd_a, menu1all, menu2all ) {
  makeDrop = document.forms[formName].elements[makeDropName];
  selMake = makeDrop.selectedIndex;
  makeDrop.length=0;
  makeDrop.options[0]=new Option(menu1all,'all');
  for (i=0;i<evd_a.length/3;i++){
    var makeName = evd_a[i*3];
    var makeCode = evd_a[i*3+1];
    makeDrop.options[i+1]=new Option(makeName,makeCode);
    if (!selMake && makeCode == initialMakeCode) {
      selMake = i+1;
    }
  }
  selMake=1;
  makeDrop.selectedIndex=selMake;

if ( selMake > 0 ) {
    modelDrop = document.forms[formName].elements[modelDropName];
    selModel = modelDrop.selectedIndex;//this line
    changedMake( formName, makeDropName, modelDropName, selModel, initialModelId );
  }
}
0
 
jfergyAuthor Commented:
Almost, the only problem is that this assumes it's choosing based on the selected index down and that they are numerically ordered so 1 would mean the first select box would be chosen. This works for some but not all as I dont grab the primary category select by numeric it's dynamic from my db. I had a function that worked included in the page but for some reason quit on me. Can you shed light on that VS the way you did it here?

<script language="javascript">
initMake('FilterListingsForm','PropCat','PropSubCat', '4', '21', regionSplit, '[Property Types]', '[all property types]');
initMake('FilterListingsForm','PropType','SubPropType','4', '21', propertySplit, '[all property types]', '[all property subtypes]');
</script>


0
 
jfergyAuthor Commented:
Thanks Man! Great answer!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.