Link to home
Start Free TrialLog in
Avatar of jfergy
jfergy

asked on

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

Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

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 );
  }
}
Avatar of jfergy
jfergy

ASKER

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>


ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jfergy

ASKER

Thanks Man! Great answer!