javascript - 如何在更改选择元素的宽度时固定所有元素位置

Question

下面的代码用于表格中的两个选择元素，但第一个元素影响第二个元素的位置。 onmouseover 和onmouseout select 元素宽度变化时如何固定位置

运行访问http://jsfiddle.net/1k03tvmu/3/

请帮帮我!!!

   <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

您有两个具有相同 ID hotelId_ 的元素，这是不正确的。

然后你使用这个Id从javascript中获取元素

element = document.getElementById('hotelId_');

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

更新

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

来自 CSS

更新 2

尝试 this fiddle

现在它像你预期的那样工作了，只需在改变宽度时改变相对于绝对的位置

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