Want to change combo box using java script

hYph3n · #1 (**permalink**) 01-12-07, 01:30 AM

hi

I am using JSP to make some web. On one page, i have 2 combo boxes. say combo1, combo2. the combo1 values are taken from the db when page load and combo2 values are loaded depending on the combo1 selection (i am not using any db for combo2, it is just hardcoded value i have at client side so no need to send request).

What i want is to call a javascript function on combo1_selection_changed and update combo2, but i am unable to write the code for it. can someone help me out.

Vicious · #2 (**permalink**) 01-12-07, 05:41 AM

Hey,

I'm not sure if you ask how to do it in JSP or Javascript. Anyway, I can give you a quick hint in Javascript. If it's JSP you need, then I'm afraid I can't help you:

step 1: in the HTML of combo1, you set this attribute: onchange="combo1_selection_changed(this);"

step 2: create the function "combo1_select_changed(combo1)"

There you select the appropriate hard coded values. For each value you wish to append in the combo2 box, you create a new HTML element "option". You then set the value to the desired one, and the innerHTML to either the same value, or something more readable for your visitors. Then you append that option to the optionlist of combo2.

I could have written you a chunk of code, but I don't have enough information. And I also need to know if you meant Javascript or JSP. Something tells me that perhaps you're confusing these two.

hYph3n · #3 (**permalink**) 01-12-07, 06:26 AM

Quote:

Originally Posted by Vicious

Hey,

I'm not sure if you ask how to do it in JSP or Javascript. Anyway, I can give you a quick hint in Javascript. If it's JSP you need, then I'm afraid I can't help you:

step 1: in the HTML of combo1, you set this attribute: onchange="combo1_selection_changed(this);"

step 2: create the function "combo1_select_changed(combo1)"

There you select the appropriate hard coded values. For each value you wish to append in the combo2 box, you create a new HTML element "option". You then set the value to the desired one, and the innerHTML to either the same value, or something more readable for your visitors. Then you append that option to the optionlist of combo2.

I could have written you a chunk of code, but I don't have enough information. And I also need to know if you meant Javascript or JSP. Something tells me that perhaps you're confusing these two.

yeah i meant in JavaScript and it would be great if you give me some code. I have tried but some javascript object not found error and lot of others ...

Vicious · #4 (**permalink**) 01-12-07, 08:34 AM

Here's a complete testpage with the function you need. That should give you enough code to make it work for you:

Code:

<html>
	<head>
		<title>combo</title>
		<script language="javascript">
			var hardcoded_values = new Array();
			hardcoded_values[0] = "";
			hardcoded_values[1] = new Array("option 1 - part 1","option 1 - part 2","option 1 - part 3");
			hardcoded_values[2] = new Array("option 2 - part 1","option 2 - part 2");
			hardcoded_values[3] = new Array("option 3 - part 1","option 3 - part 2","option 3 - part 3","option 3 - part 4");
			
			
			
			function combo1_selection_changed(combo1)
			{
				// 1. get the selected value from combo1:
				var combo1_value = combo1.value;
				
				// 2. make sure combo2 is empty:
				document.forms["testForm"].elements["combo2"].options.length=0;
				
				// 3. loop throught the hard-coded values:
				for (var i=0;i<hardcoded_values[combo1_value].length;i++)
				{
					// dynamically create a new <option> element:
					var opt = document.createElement("option");
					// set the value-attribute of it:
					opt.setAttribute('value',i+1); // (normally, i is zero-based, but we do +1 so that "part 1" equals a value of 1..
					// set the displayed value:
					opt.innerHTML = hardcoded_values[combo1_value][i];
					// append this option to combo2:
					document.forms["testForm"].elements["combo2"].appendChild(opt);
				}
			}
		</script>
	</head>
	<body>
		<form name="testForm" action="" method="post">
			<select name="combo1" onchange="combo1_selection_changed(this);">
				<option value="0"></option>
				<option value="1">option 1</option>
				<option value="2">option 2</option>
				<option value="3">option 3</option>
			</select><br />
			<select name="combo2">
			</select>
		</form>
	</body>
</html>