?
Solved

Dynamic Select Box with Sub Select

Posted on 2009-02-19
4
Medium Priority
?
1,244 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:jfergy
  • 2
  • 2
4 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 23688676
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
 

Author Comment

by:jfergy
ID: 23690560
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
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 1400 total points
ID: 23707817
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
 

Author Closing Comment

by:jfergy
ID: 31549055
Thanks Man! Great answer!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question