Javascript 如何在更改选定图元的宽度时固定所有图元的位置

下面是表格中两个选择元素的代码，但第一个元素会影响第二个元素的位置。 当选择元素的宽度在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"; });

---

您有两个id相同的元素hotelId_uu，这是不正确的

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

element = document.getElementById('hotelId_');

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

更新

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

来自css

更新2

试着拉小提琴

现在它的工作原理与您预期的一样，只需在更改宽度时更改相对于绝对值的位置

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";
});

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

如果第一个单元格为100px，第二个单元格为1000px，则将表格固定为宽度：1100px；这应该可以阻止它四处跳跃注意我没有修复你的无效ID：

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

tr { border: 1px solid; }

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

---

我修改了小提琴：

删除了行边框并将其更改为表单元格-不确定这是否真的起到了作用

td {
    border: 1px solid;
}

为标签单元格指定了特定的类

.label{ width: 100px;}

为选择框指定了特定的宽度

select{ width: 100px;}

---

一切似乎都得到了应有的回应

难道你不知道DOM元素需要有唯一的id吗？！但是它改变了元素的位置-你所说的“它”是什么？是的，我改变了，但同样的问题。哪一个是错误的行为？@faby>>onmouseover/onmouseout第一个元素的宽度应该增加/减少，第二个元素的位置应该固定，但第一个元素会影响第二个元素的位置。是的，我改变了。是的，我改变了已删除td.content，但第二个元素已移动到下一行。我希望两个元素应位于同一行。我不明白您想要什么。如果您希望所有tds位于同一行中，并且更改了第一个tds的宽度，则第二个tds将自动向右滑动。你能画你想要的吗？非常感谢你的指导。谢谢分享小提琴。谢谢。