Click here to Skip to main content
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 23:02pm
Edited 28-Jul-12 23: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 OriginalGriff 575
1 Maciej Los 555
2 Sascha Lefévre 264
3 Suvendu Shekhar Giri 229
4 Richard Deeming 195
0 Sergey Alexandrovich Kryukov 9,693
1 OriginalGriff 9,185
2 Peter Leow 5,112
3 Kornfeld Eliyahu Peter 3,373
4 Maciej Los 2,876

Advertise | Privacy | Mobile
Web03 | 2.8.150327.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