New Post: Hide/Show fields based on option chosen in complex dropdown (I suspect javascript onChange event not firing in sharepoint complex dropdown)

I've got 5 cascading dropdowns, I'm using SPServices 0.7.2 together with JQuery 1.8.1 to get my cascading dropdowns working and I've used the "SPComplexToSimpleDropdown" function to prevent complex dropdown, all that is working perfectly. All my dropdowns are lookup columns that load more than 20 items from the datasource so all of them are complex dropdowns according to IE but i've taken care of that through the use of "SPComplexToSimpleDropdown" function so they're bahaving normally. Within the same form, there are some input fields that are applicable on certain options from the dropdowns so i would like those fields to hide/show depending on that chosen option from the dropdowns. I've implemented a javascript for that but it only works in Firefox and Google Chrome but still doesn't work in IE even though i've used "SPComplexToSimpleDropdown" to prevent complex dropdowns. My main goal is to have these other input fields hidden when the form loads then appear only when a certain option is chosen on one of the dropdowns. Please point me to the correct direction because i believe even though those dropdowns appear as simple dropdowns, technically they are still complex dropdowns behind the scenes and i think that's one of the main reasons they are not responding to the javascript onChange event. On firefox and Chrome the solution works like a charm, the input fields show and hide as requested.

Below is the javascript i've used to prevent complex dropdowns and it's working perfectly.

<script language="javascript" src="/sites/records/Documents/jquery-1.8.1.min.js" type="text/javascript"></script><script language="javascript" src="/sites/records/Documents/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
$().SPServices.SPComplexToSimpleDropdown({
columnName: "Human Resources Management Level 2"});

Below is the javascript i've used to show/hide controls, it works only on FF and Google Chrome, how can i get it to work on IE?

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideFieldsOnStart");
function hideFieldsOnStart() {
var myControl=getTagFromIdentifierAndTitle("input","TextField","Employee Number");
myControl.parentNode.parentNode.parentNode.style.display="none";
getTagFromIdentifierAndTitle("select","Lookup","Human Resources Management Level 2").onchange=function() {ChangeEvent()};
}
function ChangeEvent(){
var dropDown=getTagFromIdentifierAndTitle("select","Lookup","Human Resources Management Level 2");
var option=dropDown.options[dropDown.selectedIndex].text;
var myControl=getTagFromIdentifierAndTitle("input","TextField","Employee Number")
if(option=="4/6/13-Bursaries" || option=="4/7/P-Policy" || option=="4/7/1-Submissions and disagreements" || option=="4/7/2-Performance rewards" || option=="4/7/3-Career development"){
myControl.parentNode.parentNode.parentNode.style.display="";
}
else{
myControl.parentNode.parentNode.parentNode.style.display="none";
}
}
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>