<select> width in IE does not work, as in other browsers

Question

I have three selection fields.

<div style='float: left; padding-right: 10px;'>
    <select size="10" name="company_id">
        // a lot of options here
    </select>
</div>

<div style='float: left; padding-right: 10px;'>
    <select size="10" name="department_id" id="department_id">
        // a lot of options here
    </select>
</div>

<div style='float: left; padding-right: 10px;'>
    <select size="10" name="user_id[]" id="user_id" multiple>
        // a lot of options here
    </select>
</div>

They move next to each other. When you select an element in the first, the ajax request updates the values ​​of the second.

What happens in Firefox and most other browsers is that it resizes and pops a third. But in IE (6.0 and 7), the second resizes, but it does not push the third.

What I did was fix the size of the boxes, but I want to fix it correctly, so does anyone know how?

Here's the jQuery code that I use to add data to sections selects.

$.get("ajax/fetchDepartment.php?sec=departments&company_id="+company_id,
    function(data){
        $("#department_id").html(data);
});

datacontains the <option>Stuff</option>necessary

EDIT to add: select boxes always have some meaning inside them.

Here is a picture of what is happening (I had to remove the items in the boxes through Photoshop, but you got my point)

selcet http://cznp.com/select_bug.jpg

Answer 1

IE "" (, innerHTML ) , , . , , html select. , :

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);
}

:

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

}

- , , innerHTML, . .

:

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

Answer 2

select . , u , u - .

IE,

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

.