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>的需要

編輯補充：選擇框總是在其中一些價值。

這裏是發生了什麼（我不得不通過Photoshop來刪除盒中的物品，但你明白我的意思）

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

Answer 1

IE和select選項有一些'怪癖'（有些關於select框和innerHTML的細節here）關於它們我從來沒有真正理解過，但我至少可以爲你提供一種解決方法。 訣竅是將選項明確地添加到選擇框中，而不僅僅是更改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); 

} 

您可能會發現這page有用-apparently他僅通過潤飾的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> 

在第二和第三選擇開始。