1

我的页面由一个包含两个下拉列表的表格组成。当第一个下拉列表（组）发生变化时，第二个下拉列表将获得新内容（JavaScript），具体取决于第一个选择。

进程监视器

在 IE7 和 IE8 的兼容性视图中，但是第二个下拉菜单不会调整表格的大小。

在此处输入图像描述

这是我所期望的以及它在其他浏览器中的样子（下拉列表扩展到其最大值的大小）：

在此处输入图像描述

知道如何在 IE7 中获得相同的行为吗？

这是代码：

<table border="1" style="background-color: silver; margin: 0; padding: 0">
<tr>
    <td style="background-color: #336; color: white; font-weight: bold">Process Monitor  </td>
</tr>
<tr><td>
    <table style="border: 0; margin: 0; padding: 0">
    <tr>
        <td width="10px">&nbsp;</td>
        <td><form name="rid_select" "action="?" method="GET">
            <select id="pvar_pri" name="pvar_pri" onChange="setOptions(this.options[this.selectedIndex].value)">
                <option value="0">Select group</option>
                <option value="5">Item 1</option>
                <option value="10">Item 2</option>
            </select>
            <select id="pvar_sec" name="pvar_sec" onChange="this.form.submit()">
                <option value="">Select variable</option>
            </select>
            <input type="submit" value="Select">
        </form></td>
        <td width="10px">&nbsp;</td>
    </tr>
    </table>
</td>
</tr></table>
4

1 回答 1

1

我真的尝试只使用 CSS 来解决这个问题，但仍然没有得到任何结果。

我可以为您提供一个替代解决方案，因为您的表格很小并且重新绘制它应该不会花费太多时间和资源：

  1. 添加包含表单的表的 ID

    <table id="FormCointaner">

  2. 设置第一个选择框的 onchange 函数，在每个值更改时重绘表格

    $(document).on('change','#pvar_pri',function(){
    $('#FormCointaner').html($('#FormCointaner').html());
});

据我说，由于某种原因，添加新元素时 IE 不会重绘表格。

你可以在这里查看我的想法：

http://jsfiddle.net/jnKnx/

于 2012-09-06T08:34:39.190 回答