<select> ширина в IE не ведет себя как в других браузерах

Question

У меня есть три поля выбора.

<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>

Они плавают рядом друг с другом. Когда вы выбираете элемент в первом, запрос ajax обновляет значения второго.

Что происходит в Firefox и большинстве других браузеров, так это то, что он изменяется в размере и отталкивает третий. Но в IE (6.0 и 7) второй изменяет размер, но не отталкивает третий.

Что я сделал, так это установил размер ящиков, но я хочу исправить это правильно, чтобы кто-нибудь знал, как?

Вот код JQuery, который я использую для добавления данных в выбранные отделы.

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

data содержит <option>Stuff</option> необходимые

ИЗМЕНИТЬ, чтобы добавить: в полях выбора всегда есть какое-то значение.

Вот картина того, что происходит (мне пришлось убрать предметы в коробках с помощью фотошопа, но вы меня поняли)

ошибка 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

попробуйте поставить опцию внутри выбора при запуске. Я предполагаю, что вы начинаете заполнять второй и третий выбор, только когда выбираете что-то из первого.

У меня были проблемы с пустым выбором в IE, поэтому просто введите

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

во втором и третьем выберите для начала.