修復選擇選項下拉菜單的寬度

Question

當我打開我的下拉列表時，列表的寬度大於下拉框。 列表寬度應與下拉框相同。

Answer 1

您可以使用以下方法：

select, option { width: __; } 

請記住，這可能不會對谷歌Chrome瀏覽器。如果你想要一個跨瀏覽器的解決方案，你可能不得不使用PHP來用SubStr剪輯字符串。你也可以使用jQuery來設置選項文本的長度。

jQuery('#dropdown option').each(function() { 
 
var optionText = this.text; 
 
console.log(optionText); 
 
var newOption = optionText.substring(0,19); 
 
console.log(newOption); 
 
jQuery(this).text(newOption + '..'); 
 
});

select, option { 
 
    width:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td> 
 
      <select id="dropdown" style="width:150px;"> 
 
       <option value="test">123123123123123123123123123123</option> 
 
       <option value="test2">123123123123123123123123123123</option> 
 
       <option value="test3">123123123123123123123123123123</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
    </tr> 
 
</table>

JsFiddle

你將不得不雖然設置的

var newOption = optionText.substring(0,19); 

的子字符串值自己。

Answer 2

嘗試設置的選項相同寬度的選擇框

#SelectBoxid { 
    width:150px; 
} 
#SelectBoxid option{ 
    width:150px; 
}