Click here to Skip to main content
15,946,988 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)

I've two select controls in my webpage (first named "type", second named "ht". When the value of the first changes, the select control just below is re-populated via Javascript.

Here's the code:

function ableht ()

var combo;

var combo =;

if (document.srch.type.value=="Homes")
{ = 0;
combo.options[0] = new Option ("Any Type");
combo.options[1] = new Option ("Houses");
combo.options[2] = new Option ("Flats");
combo.options[3] = new Option ("Upper Portions");
combo.options[4] = new Option ("Lower Portions");
combo.options[5] = new Option ("Farm Houses");


else if (document.srch.type.value="Plots")

{ = 0;
combo.options[0] = new Option ("Any Type");
combo.options[1] = new Option ("Residential Plots");
combo.options[2] = new Option ("Commercial Plots");
combo.options[3] = new Option ("Agricultural Land");



{ = 0;
combo.options[0] = new Option ("Any Type");
combo.options[1] = new Option ("Offices");
combo.options[2] = new Option ("Shops");
combo.options[3] = new Option ("Warehouses");
combo.options[4] = new Option ("Factories");
combo.options[5] = new Option ("Buildings");
combo.options[6] = new Option ("Other");


And the HTML :
Property Type: <select name="type" style="width:170px" onchange="ableht ()">

When the page loads, IE shows the first value of the first combo box selected, which it should.The problem is that when I select any value from the first select box, it is not selected in IE. The field is blank and it also does not re-populate the second select box. It works fine on Chrome, but IE is causing problem.

Any ideas how to fix it?

Updated 28-Jul-12 22:03pm

1 solution

Not quite sure how to fix it - since the debugger in IE leaves a little to be desired.

This code works in IE8 - don't have 7 to test with.

<!DOCTYPE html>
	function byId(e) {return document.getElementById(e);}
	function stateComboChange()
		var combo1 = byId('stateCombo');
		var combo2 = byId('cityCombo');
			case '-1': 	addOption(combo2, -1, '-select state first-');
			case '0':	addOption(combo2, 0, 'Melbourne');
						addOption(combo2, 1, 'Horsham');
			case '1':	addOption(combo2, 2, 'Sydney');
						addOption(combo2, 3, 'Bondi');
			case '2':	addOption(combo2, 4, 'Hobart');
						addOption(combo2, 5, 'Port Arthur');
	function cityComboChange()
		var combo2, tgt;
		combo2 = byId('cityCombo');
		tgt = byId('tgt');
		tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;
	function emptyCombo(e)
		e.innerHTML = '';
	function addOption(combo, val, txt)
		var option = document.createElement('option');
		option.value = val;
		option.title = txt;
	<select id='stateCombo' onchange='stateComboChange();'>
		<option value='-1' title='-select one-'>-select one-</option>
		<option value='0' title='Vic'>Vic</option>
		<option value='1' title='Nsw'>Nsw</option>
		<option value='2' title='Tas'>Tas</option>
	<select id='cityCombo' onchange='cityComboChange();'>
		<option value='-1' title='-select state first-'>-select state first-</option>
	<div id='tgt'></div>
Share this answer
FahdSanaullah 29-Jul-12 5:45am    
Thanks. But I can't understand your code quite well since I'm not a pro. Would you just tell me whats the main thing or explain me bit?
enhzflep 29-Jul-12 6:00am    
My pleasure. Sure thing I'll have a go.
I don't know what you do/don't understand, so forgive me if explain things that you know already.

byId is just a function that's used as a short-hand way of writing documnt.getElementById - a function that gets the HTML element with the supplied id

■ When the first combo's selection is changed, we get the elements that represent each of the combo boxes.
■ Next, we remove all of the html between the <select id='cityCombo'> </select> tags - we remove the options in the 2nd combo.
■ After that, we test the value of the 1st combo
■ If it's -1, then the 1st option: -select one- is selected, therefore the 2nd combo has no valid entries, so we just add an option with a value of -1 and the text + title of -select state first- to combo2
■ If it's 0, 1 or 2 then we add the cities for the selected state to the 2nd combo.
■ Following that, we get the value of the 2nd combo and copy that text inside of <div id='tgt'> </div>

Does this help?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900