dynamic list creation and IE7 problem

[wbodger]

I have a dynamic list creation script that I inherited that acts a little funny in IE7. The script is:

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "High School", "High School", "");
addOption(document.drop_list.Category, "Middle School", "Middle School", "");
addOption(document.drop_list.Category, "Combined", "Combined", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "--Trip--", "");

if(document.drop_list.Category.value == 'High School'){
addOption(document.drop_list.SubCat,"Belize", "Belize");
addOption(document.drop_list.SubCat,"Camp Joy", "Camp Joy");
addOption(document.drop_list.SubCat,"Cranks Creek", "Cranks Creek");
addOption(document.drop_list.SubCat,"Jamaica", "Jamaica");
addOption(document.drop_list.SubCat,"New Orleans 1", "New Orleans 1");
addOption(document.drop_list.SubCat,"New Orleans 4", "New Orleans 4");
addOption(document.drop_list.SubCat,"Tex Mex 1", "Tex Mex 1");
addOption(document.drop_list.SubCat,"Tex Mex 2", "Tex Mex 2");
addOption(document.drop_list.SubCat,"Yucatan, Mexico", "Yucatan, Mexico");
}
if(document.drop_list.Category.value == 'Middle School'){
addOption(document.drop_list.SubCat,"Chattanooga, TN (MS)", "Chattanooga, TN (MS)");
addOption(document.drop_list.SubCat,"Dungannon, VA", "Dungannon, VA");
addOption(document.drop_list.SubCat,"Tex Mex (MS)", "Tex Mex (MS)", "");
addOption(document.drop_list.SubCat,"West Virginia (MS)", "West Virginia (MS)");
}
if(document.drop_list.Category.value == 'Combined'){
addOption(document.drop_list.SubCat,"Chattanooga, TN", "Chattanooga, TN");
addOption(document.drop_list.SubCat,"Jackonsville, FL", "Jackonsville, FL");
addOption(document.drop_list.SubCat,"New Orleans 2", "New Orleans 2");
addOption(document.drop_list.SubCat,"New Orleans 3", "New Orleans 3");
addOption(document.drop_list.SubCat,"West Va 1 (Panther)", "West Va 1 (Panther)");
addOption(document.drop_list.SubCat,"West Va 2 (Welch)", "West Va 2 (Welch)");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

ad I call it like:

<tr>
	<td colspan="2" class="style3"><div align="right">Age Group:</div></td>
	<td class="style3"><div align="left">
			<select name="Category" id="Category" class="dropdown" onChange="SelectSubCat();">
				<option value="">--Age Group--</option>
			</select>
		</div>
	</td>
</tr>
<tr>
	<td colspan="2" class="style3"><div align="right">Trip Attending:</div></td>
	<td class="style3"><div align="left">
			<SELECT id="SubCat" NAME="SubCat">
				<Option value="">--Trip--</Option>
			</SELECT>
		</div>
	</td>
</tr>

where the form is

<form action="sonservants.asp" name="drop_list" method="post" onKeyUp="highlight(event)" onClick="highlight(event)" onSubmit="return isFormComplete(this);">

Now, what is happening is that with IE7 you cannot use your mouse to select anything from the drop down menus, bt you can select the select box and then use the arrow keys to select what you want to choose. So, any body have any thoughts on what the issue may be?

Thanks,
Willie

 

[j4606]

Where is your hightlight function? Could you provide a working example of the page or a link so we could test out what you are seeing?

 

[wbodger]

Here is a page where the code resides:

http://www.ycmhome.org/sonservants/downloads.html

is that enough? As for the highlight function, now that you mention it, I do not see one anywhere...

 

[wbodger]

No, I found the highlight function:

//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}

 

[j4606]

I don't exactly know why but your highlight function is reseting the form elemnt. It could be something do to with ie redraw of the select list. I havn't been able to test any futher than that. To make your code work in ie for select lists call your highlight function from onactivate instead of onclick.

<form action="sonservants.asp" name="drop_list" method="post" onkeyup="highlight(event)" onactivate="highlight(event)"  onsubmit="return isFormComplete(this);">

unfortunatly this will break your code in other browsers like firefox. So you may have to code branch and have one highlight function for ie and another for firefox. Or branch with logic. Make sure you remove

onclick="highlight(event);"

from your ie versions as that is what is keeping select list from working properly.

 

[wbodger]

Interesting. I just removed that call altogether and it works fine for both browsers. However, I left

onkeyup="highlight(event)"

and that works just fine in both firefox and IE7. Anyway, thanks for the help!

Willie