代码之家 › 专栏 › 技术社区 › Ólafur Waage

IE中的宽度与其他浏览器中的不同

html-select ajax html

Ólafur Waage · 技术社区 · 15 年前

我有三个选择框。

<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

2 回复 | 直到 12 年前

Steerpike 15 年前

IE和select选项有某些“怪癖”(一些关于选择框和innerHTML的怪癖是详细的) here 诀窍是将选项精确地添加到选择框中,而不仅仅是更改选择元素的整个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 += '';
}

Thomas Stock 15 年前

我在IE中遇到了空选择的问题,所以只需放置一个

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

在第二个和第三个选项中,选择开始。

推荐文章

Geeta · 选定选项上未显示图像

6 年前

sjkp · Selenium-如果值位于html中的<table>标记内而不是<option>下,则从下拉列表中选择项目

6 年前

Luke · Bootstrap 4选择样式

7 年前

kamran shah · 使用jQuery使用下拉选择值更新类

7 年前

AllramEst · 在选择列表中,哪种方式是选择默认选定项的最佳方式?(下拉列表)

7 年前

Terry · 检索已使用JavaScript重新排序的选择元素选项列表

7 年前

Jóni Silva · 下拉列表(选择/选项)不适用于Firefox mobile(带触摸)

7 年前

Brett Roby · 在另一个选择实例中选择时禁用选择选项值

7 年前

Patricia · javascript jquery下拉列表框-如何在特定索引处设置选项文本(未选中!)

7 年前

R1ddler · 提交后如何显示所选选项值

7 年前