A problem with Select's width in IE

Answer 1

try putting an option inside the selects on start. I guess u only start filling the second and third select when u selected something from the first.

I've had problems with empty selects in IE so just put an

<option value="-1">-</option>

in the 2nd and third select to start with.

Answer 2

IE and select options have certain 'quirks' (some, regarding select boxes and innerHTML are detailed here) about them that I've never really fully understood, but I can at least provide you with a workaround. The trick is to add the options exlicitly to the select box, not just change the entire html of the select element wholesale. So the following works:

function changeval() {

    var option = document.createElement("option");
    option.text = 'my long text value to change stuff';
    option.value = 'test';
    $('#department_id')[0].options.add(option);
}

While this does not:

function changeval() {
    var data = '<option value="test">my long test string with wide stuff</option>';
    $("#department_id").html(data);

}

You might find this page helpful -apparently he fixed it by just retouching the innerHTML, so that might be a simpler option. Up to you.

The solution from the second link would look like:

function changeval() {
    var data = '<option value="test">my long test string with wide stuff</option>';
    $("#department_id").html(data);
    $("#department_id").parent()[0].innerHTML += '';
}