Question

下面的代码表示表中的两个select元素，但第一个元素影响第二个元素的位置。如何在选择元素的宽度改变onmouseover和onmouseout

时修复位置

请帮帮我!!!

   <table>
   <tr>                            
     <td valign="top"><strong style="color: #3265a6">Area:&nbsp;</strong></td>
     <td class="content">
       <select style='FONT-SIZE: 9pt;width: 100px;' class="txtbox" id="hotelId_" size="5" multiple>
              <option value="All">Something</option>
       </select>
       <select style='FONT-SIZE: 9pt;width: 100px;' class="txtbox" id="Id" size="5" multiple>
               <option value="All">Something</option>
       </select>
     </td>
   </tr>

JavaScript的：

 element = document.getElementById('hotelId_');
 element.addEventListener("mouseover",function(){
 var maxWidth = 0;
 for (var i = 0; i < element.length; i++) {
 if (element.options[i].text.length > maxWidth) {
   maxWidth = element.options[i].text.length;
 }
 }
 element.style.width = maxWidth * 27 + "px"; 
 });

element.addEventListener("mouseout",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
if (element.options[i].text.length > maxWidth) {
    maxWidth = element.options[i].text.length;
}
}
element.style.width = maxWidth * 7 + "px"; });

Answer 1

您有两个具有相同身份hotelId_且不正确的元素。

然后您使用此Id从javascript获取元素

element = document.getElementById('hotelId_');

尝试分配两个不同的id并将id传递给编辑html的函数

<强>更新

尝试删除td.content{width: 1000px; }

来自css

更新2

尝试this小提琴

现在它按预期工作，只需在更改宽度时相对于绝对值更改位置

element = document.getElementById('hotelId_');
element.addEventListener("mouseover",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
    if (element.options[i].text.length > maxWidth) {
       maxWidth = element.options[i].text.length;
   }
}
element.style.width = maxWidth * 27 + "px"; 
    element.style.position="absolute";
});

element.addEventListener("mouseout",function(){
var maxWidth = 0;
for (var i = 0; i < element.length; i++) {
    if (element.options[i].text.length > maxWidth) {
        maxWidth = element.options[i].text.length;
    }
}
    element.style.width = maxWidth * 7 + "px"; 
    element.style.position="relative";
});

Answer 2

您的table没有定义宽度，因此它尝试在浏览器的宽度范围内渲染，但td宽度更大，因此它会以奇怪的方式进行调整。

如果第一个单元格是100px而第二个单元格是1000px，请将表格固定为width:1100px;，这应该会阻止它跳转（注意我没有修复无效的ID）：

table { border: 1px solid; width:1100px; }

tr { border: 1px solid; }

td { width: 100px; position: relative; }
td.content{ width: 1000px; }

Updated Fiddle

Answer 3

我修改了小提琴：http://jsfiddle.net/1k03tvmu/3/

删除了行边框并将其更改为表格单元格 - 不确定是否真的做了什么

td {
    border: 1px solid;
}

给标签单元格一个特定的类

.label{ width: 100px;}

为选择框提供了特定的宽度

select{ width: 100px;}

一切似乎都应该响应！

如何在更改select元素的宽度时修复所有元素位置

3 个答案: