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和选择选项对于我们从未真正完全理解的某些“怪癖”（有些，关于选择框和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很有用 - 显然他只是通过修饰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>

在第二和第三选择开始。

IE中的<select>宽度与其他浏览器不一样</select>

2 个答案: