browser compatability with js

[mikhl]

Hello!

 

I have some JS that affects the elements of a select box. When the user selectes which type of customer they are a select box automatically fills with the payment types available to them. This works in Forefox. However, if the user was using Internet Explorer they would see an empty select box instead of one filled out with the payment types.

 

To make this work I am using the innerHTML of the select box. if you are interested, my JS code is below:

 

This function also affects the visibility of some elements on the web page. However, this works well.

 

function terms(chkBox, termsText){
  	var form = document.getElementById('orderForm');
  	var chk = document.getElementById(chkBox);
  	var text = document.getElementById(termsText);

  	//if the checkbox is checked on change
  	if(chk.checked == true){
  		text.style.color = '#000000';
  		text.style.fontWeight = 'normal';
  		document.getElementById('sub1').disabled = false;
  	} else { //if it is unchecked
  		text.style.color = '#FF0000';
  		text.style.fontWeight = 'bold';
  		document.getElementById('sub1').disabled = true;
  	}
}

function changeCustType() {
var form = document.getElementById('orderForm');
var custType = form.customerType.value;
var subType = form.subType;

//default setting of subType
var temp = '<option value="">Choose a Type</option>';

//the fields to affect
var retArea = document.getElementById('retCustDetails');
var trdArea = document.getElementById('tradeCustDetails');

//change the customer type
if(custType == 'ret'){
	//make fields visible
	retArea.style.visibility = 'visible';
	//make fields hidden
	trdArea.style.visibility = 'hidden';

	//loop through sub array apd place values in correct places
	for(i = 0;i < subListArray[1].length; i++){
		//retrieves substrings for value and detail aspect of option tag
		var val = subListArray[1][i].substring(0,2);
		var det = subListArray[1][i].substring(3);
		temp += '<option value="' + val + '">' + det + '</option>';
	}//end forloop
} else if(custType == 'trd'){
	//make fields hidden
	retArea.style.visibility = 'hidden';
	//make fields visible
	trdArea.style.visibility = 'visible';

	for(i = 0;i < subListArray[2].length; i++){
		var val = subListArray[2][i].substring(0,2);
		var det = subListArray[2][i].substring(3);
		temp += '<option value="' + val + '">' + det + '</option>';
	}//end forloop
}

subType.innerHTML = temp;
}

[freelance84]

 

 

 

I did a project about 10months ago in which the selection of one select determined the content and selection of the next in a not too dis-similar way to what you are trying to achieve.

 

 

I found it was almost impossible to get ie to play ball by attemping to change the inner options...

 

 

As a work around, I decided to simply recreate the entire select element including all its options.. this worked fine. Just make sure you have your select in a span or something, then just use innerHTML on the span.

 

 

I know it feels like a cop out, but have you tried using the jquery library for this.. they might have figure it out so you can just change the options..

 

 

I was against jquery for ages untill i thought.. i'm a web developer, not Bill Gates bitch. Give it 4-5 years when the vast majority stop using gates's internet exploder and writing js without jquery will become viable again... unless you have boundless amounts of time that is 

[haku]

I'd do something like this:

 

var  i, list;

 

list = document.createElement("select");

 

for(i = 0; i < something.length; i++)

{

  list.appendChild(document.createElement("option").appendChild(document.createTextNode(something));

}

 

Note: not tested.