Click here to Skip to main content
11,811,971 members (74,542 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: IE7 Javascript HTML

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?

Posted 28-Jul-12 22:02pm
Edited 28-Jul-12 22:03pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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>
Member 7793959 at 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 at 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
0 KrunalRohit 289
1 Abhinav S 215
2 Palash Mondal_ 210
3 CHill60 180
4 Sergey Alexandrovich Kryukov 130
0 OriginalGriff 3,893
1 KrunalRohit 2,441
2 CPallini 2,240
3 Maciej Los 2,155
4 ppolymorphe 1,725

Advertise | Privacy | Mobile
Web03 | 2.8.151002.1 | Last Updated 29 Jul 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100