Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: IE7 Javascript HTML
hi,
 
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 = document.srch.ht;
 
if (document.srch.type.value=="Homes")
{
 
document.srch.ht.options.length = 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")
 
{
 
document.srch.ht.options.length = 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");
 
}
 
else 
 
{
 
document.srch.ht.options.length = 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 ()">
  <option>Homes</option>
  <option>Plots</option>
  <option>Commercial</option>
</select>
 
 
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?
 
Thanks!
Posted 28-Jul-12 23:02pm
Edited 28-Jul-12 23:03pm
v2

1 solution

Rate this: bad
good
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>
<html>
  <head>
  <script>
	function byId(e) {return document.getElementById(e);}
	
	function stateComboChange()
	{
		var combo1 = byId('stateCombo');
		var combo2 = byId('cityCombo');
		
		emptyCombo(combo2);
		switch(combo1.value)
		{
			case '-1': 	addOption(combo2, -1, '-select state first-');
						break;
						
			case '0':	addOption(combo2, 0, 'Melbourne');
						addOption(combo2, 1, 'Horsham');
						break;
						
			case '1':	addOption(combo2, 2, 'Sydney');
						addOption(combo2, 3, 'Bondi');
						break;
						
			case '2':	addOption(combo2, 4, 'Hobart');
						addOption(combo2, 5, 'Port Arthur');
						break;
		}
		cityComboChange();
	}
	
	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;
		option.appendChild(document.createTextNode(txt));
		combo.appendChild(option);
	}
	
  </script>
  </head>
  <body>
	<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>
	
	<select id='cityCombo' onchange='cityComboChange();'>
		<option value='-1' title='-select state first-'>-select state first-</option>
	</select>
	
	<div id='tgt'></div>
</body>
</html>
  Permalink  
Comments
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 8,149
1 Sergey Alexandrovich Kryukov 7,287
2 DamithSL 5,614
3 Manas Bhardwaj 4,986
4 Maciej Los 4,910


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 29 Jul 2012
Copyright © CodeProject, 1999-2014
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