IE と選択オプションには、私が完全には理解していない特定の「癖」があります (選択ボックスと innerHTML については、ここで詳しく説明します) が、少なくとも回避策を提供できます。トリックは、select 要素の html 全体を大規模に変更するだけでなく、明示的に選択ボックスにオプションを追加することです。したがって、次のように動作します。

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 をレタッチするだけで修正したようです。君による。

2 番目のリンクのソリューションは次のようになります。

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

開始時に選択内にオプションを入れてみてください。最初から何かを選択したときに、2番目と3番目の選択を埋め始めるだけだと思います。

IEで空の選択に問題があったので、

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

2 番目と 3 番目の選択で開始します。