HTML Problem

HTML Problem

I have two select boxes.
The second one is getting the content with ajax call, acording to the value selected at the first one.
My problem is only in IE.
When the second select box geting longer text and the html table TD is not enlarging itself too.
FireFox works fine with this code.
$(document).ready( function() {

$("#category_id").change(function(){

var CategoryId;

CategoryId = $("#category_id").val();

var selType = $('select#type_id');

$.getJSON('RetrieveProductTypes.action', {'categoryId': CategoryId},

function(data) {

var typesList = (data.list);

if (typesList!=null) {

var options = '<option value="">Select Type</option>';

if (typesList["hibernateModel.ProductType"] instanceof Array){

$.each(typesList["hibernateModel.ProductType"],function(j,cellData) {

var key = typesList["hibernateModel.ProductType"][j].typeId;

var val = typesList["hibernateModel.ProductType"][j].typeCode;

options += '<option value="' + key + '">' + val + '</option>';

});

} else if (typesList["hibernateModel.ProductType"] instanceof Object) {

var key = typesList["hibernateModel.ProductType"].typeId;

var val = typesList["hibernateModel.ProductType"].typeCode;

options += '<option value="' + key + '">' + val + '</option>';

}

}

selType.html(options);

});

});