(Urgent) Problem with Populating 3rd DropDown list in JSP page

Question

romi123 0 Newbie Poster

15 Years Ago

Hi guys,
i am new to JSP that is why i look forward your assistance. I have a JSP page where 3 drop down lists are.

on the basis of selected value from first drop down i need to have trigg new values into 2nd drop down and similarly in 3rd i have to have on the basis of 2nd...

Data: i have retrieved one arraylist of objects from database (through Servlet) where first object contains set of second type of objects and second type of object has a set of 3rd type of objects. e.g. Object1.getObject2s().getObject3s()
what i have in arraylist is just firstkind of object through servlet in jsp page. but i am unable to retrieve it for filter second type of drop down box. even though i have data in the arraylist.

I just used following example but it is not fruitful...example is

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<script language="javascript" type="text/javascript">


// And in the list.js file
function fillCategory()
{
   // this function is used to fill the category list on load
   addOption(document.drop_list.Category, "Fruits", "Fruits", "");
   addOption(document.drop_list.Category, "Games", "Games", "");
   addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

function SelectSubCat()
{
   // ON selection of category this function will work

 removeAllOptions(document.drop_list.SubCat);
   addOption(document.drop_list.SubCat, "", "SubCat", "");
   


   if(document.drop_list.Category.value == 'Fruits')
   {
      addOption(document.drop_list.SubCat, "Mango", "Mango");
      addOption(document.drop_list.SubCat, "Banana", "Banana");
      addOption(document.drop_list.SubCat, "Orange", "Orange");
   }
   if(document.drop_list.Category.value == 'Games')
   {
      addOption(document.drop_list.SubCat, "Cricket", "Cricket");
      addOption(document.drop_list.SubCat, "Football", "Football");
      addOption(document.drop_list.SubCat, "Polo", "Polo", "");
   }
   if(document.drop_list.Category.value == 'Scripts')
   {
      addOption(document.drop_list.SubCat, "PHP", "PHP");
      addOption(document.drop_list.SubCat, "ASP", "ASP");
      addOption(document.drop_list.SubCat, "Perl", "Perl");
   }
   if(document.drop_list.Category.value == 'Fruits')
   {
      addOption(document.drop_list.SubCat, "Mango", "Mango");
      addOption(document.drop_list.SubCat, "Banana", "Banana");
      addOption(document.drop_list.SubCat, "Orange", "Orange");
   }
   
  
}
function SelectSub2Cat()
{
   // ON selection of category this function will work

 
   
    removeAllOptions(document.drop_list.Sub2Cat);
   addOption(document.drop_list.Sub2Cat, "", "Sub2Cat", "");

   if(document.drop_list.SubCat.value == 'Mango')
   {
      addOption(document.drop_list.Sub2Cat, "Mango1", "Mango1");
      addOption(document.drop_list.Sub2Cat, "Banana1", "Banana1");
      addOption(document.drop_list.Sub2Cat, "Orange1", "Orange1");
   }
   if(document.drop_list.SubCat.value == 'Cricket')
   {
      addOption(document.drop_list.Sub2Cat, "Cricket1", "Cricket1");
      addOption(document.drop_list.Sub2Cat, "Football", "Football");
      addOption(document.drop_list.Sub2Cat, "Polo1", "Polo1", "");
   }
   if(document.drop_list.SubCat.value == 'PHP')
   {
      addOption(document.drop_list.Sub2Cat, "PHP1", "PHP1");
      addOption(document.drop_list.Sub2Cat, "ASP1", "ASP1");
      addOption(document.drop_list.Sub2Cat, "Perl1", "Perl1");
   }
  
  
}


/////////////////////////

function removeAllOptions(selectbox)
{
   var i;
   for(i = selectbox.options.length - 1; i >= 0; i -- )
   {
      // selectbox.options.remove(i);
      selectbox.remove(i);
   }
}


function addOption(selectbox, value, text )
{
   var optn = document.createElement("OPTION");
   optn.text = text;
   optn.value = value;

   selectbox.options.add(optn);
}
</script>

<title>(Type a title for your page here)</title>

</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="a.html" method="POST" >
<SELECT  NAME="Category" onChange="javascript:SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT  NAME="SubCat" onChange="javascript:SelectSub2Cat();">
<Option value="">SubCat</option>
</SELECT>
&nbsp;
<SELECT  NAME="Sub2Cat">
<Option value="">Sub2Cat</option>
</SELECT>
</FORM>
</body>
</html>

it would be great if you reply me as soon as possible.
Thanks in advance.
Romi

jsp

3 Contributors
3 Replies
179 Views
5 Months Discussion Span
Latest Post 14 Years Ago Latest Post by jptinsmn

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jptinsmn 0 Newbie Poster · Answer 1 · 2009-02-24T08:04:06+00:00

I had a similar issue last month where we were not allowed to use Ajax and reloading the page every time someone changed an option was tedious and long. My coworker found a javascript function that allowed dynamic loading of the child dropdown based on a selection from a parent dropdown. I made it generic and reusable and use it throughout my project. Doing the tripple dropdown was tricky so here is what I did.

<script type="text/javascript>
			
/**************************************************
function: populate a child drop-down dynamically depending 
	on what parent value was choosen.  
	Parameters:
		  mstParent (hidden parent select whose options are (pk, parent text)) not null
		  mstChild  (hidden child select whose options are (pk, child text)) not null
		  selectedParentValue (the value that the user seleted) not null
		  childDropdownBox (the box to populate with new values) not null
		  selectedChildValue (the value that the user selected) can be null
***************************************************/
function setChildDropdownBox(mstParent, mstChild, 
				selectedParentValue, childDropdownBox, selectedChildValue){
				
	childDropdownBox.options.length = 0;
	/*
	 * If there is no parent selected then set the child to 
	 * disabled and inform them to select an option from the primary
	 * drop-down
	 */
	if(selectedParentValue == ""){
		childDropdownBox.disabled = true;
		childDropdownBox.options[childDropdownBox.options.length] = 
			new Option("Please select primary dropdown first","");		
	}else{
		childDropdownBox.disabled = false;
		childDropdownBox.options[childDropdownBox.options.length] = 
			new Option("-- Please select a value --","");		
		var index1;
		for(index1=0; index1<mstParent.length; index1++){
			
			if(mstParent.options[index1].text == selectedParentValue){
				childDropdownBox.options[childDropdownBox.options.length] = 
					new Option(mstChild.options[index1].text,mstChild.options[index1].value);
				if(selectedChildValue != "" && selectedChildValue == mstChild.options[index1].value){
					childDropdownBox.options[childDropdownBox.options.length-1].selected = true;
				}	
			}					
		}
	}
	return childDropdownBox.options;		
}
/**************************************************
function: populate Secondary drop-down when primary drop-down
     is choosen, then populates the Tertiary drop-down based on 
     the first value in the secondary drop-down
***************************************************/
function updateSecondaryDropdown(selectedParentValue){
	var mstParentList = document.getElementById("masterPrimaryList");
	var mstChildList = document.getElementById("masterSecondaryList");
	var childSelectBox = document.getElementById("secondaryBox");
	var childIdHidden = document.getElementById("secondaryBoxHidden").value;
	setChildDropdownBox(mstParentList, mstChildList, selectedParentValue, childSelectBox, childIdHidden);
	
	var selectedSecondaryValue = document.getElementById("secondaryBox").value;
	updateTertiaryDropdown(selectedSecondaryValue);
}
</script>

"secondaryBox" was the id for the select box that the user sees with "secondaryBoxHidden" containing the original value of the secondary box (my page did have to reload at some point and I had to load those boxes on page load so I saved the value in a hidden then call the javascript functions to load the boxes according to the user's selected values before the reload)

Inside the jsp I put several hidden select boxes that contain the values that I want. Two for each parent/child option. The "secondaryList" was a custome class that contained two strings, a primary value and a secondary value. I then inside my controller populated that with unique combinations of those two and excluded the third for now.

I then did the same for the tertiary drop-down with a complete list of all values from the database and constructed the first invisible select with:
<option value="secondary">secondary</option>
and for the tertiary:
<option value="id">tertiary</option>

<div style="display:none;">
<c:if test="${secondaryList ne null}">
	<select id="masterPrimaryList">
		<c:forEach items="${secondaryList }" var="view">
		<option value="${view.primary}">${view.primary}</option>
		</c:forEach>
	</select>
	<select id="masterSecondaryList">
		<c:forEach items="${secondaryList }" var="view">
		<option value="${view.secondary}">${view.secondary}</option>
		</c:forEach>
	</select>
</c:if>
</div>

I hope this helps.

Gayatri1987 0 Newbie Poster · Answer 2 · 2009-07-22T15:03:14+00:00

Hiii jptinsmn ...

NIce coding but i didn't understand where have you shown the hidden dd in your form and how have you fired the javascrip???As you have not mentioned the method in any of the form's controls. Thanks Gayatri.

jptinsmn 0 Newbie Poster · Answer 3 · 2009-07-25T23:49:51+00:00

Hiii jptinsmn ...
NIce coding but i didn't understand where have you shown the hidden dd in your form and how have you fired the javascrip???As you have not mentioned the method in any of the form's controls. Thanks Gayatri.

Hey Gayatri,

I am no longer on that project so I do not have the code infront of me so I can't copy/paste more code, but what I ended up doing was place the hidden dropdowns at the top of the page just before my <form> tag in the body.

I then call the function from the first and second dropdowns that the user will actually use. It looked something like this (you may have to tweak it a little):

<form:select id="userFirstDropDown" onchange="javascript:updateSecondaryDropdown(this.value);">
<!-- populate primary drop down list for user -->
</form:select>
<text type="hidden" id="originalFirstDropDownSelection" value"[get value from the form]"/>

<form:select id="userSecondDropDown" onchange="javascript:updateTertiaryDropdown(this.value);">
<!-- empty second drop down list (populated by function) -->
</form:select>
<text type="hidden" id="originalSecondDropDownSelection" value"[get value from the form]"/>

<form:select id="userThirdDropDown">
<!-- empty third drop down list (populated by function) -->
</form:select>
<text type="hidden" id="originalThirdDropDownSelection" value"[get value from the form]"/>

Then at the bottom of the page after all the code and outside the </form> I put a static block of javascript that call retrieves the value of the first hidden user dropdown selection and populates the second user dropdown and then does the same for the third user dropdown. This is for populating the dropdowns with the correct values for existing records. That part was a little tricky at first. If I still had access to that code I would post it, but as I said earlier I am no longer on that project.

I hope this helps.

Jonathan