Question

我正在使用Javascript动态地将新选项添加到下拉列表中，当列表恢复到所选项目并使用其右侧的箭头展开列表时，包含所选文本的框与选项列表中最宽的文本。

所以我想做的是如果你知道我的意思是没有框中文本右侧的冗余空白，那么盒子的宽度就会拥抱文本。

非常感谢，如果有人能帮助我： - ）

Answer 1

这很容易，只需删除隐藏选项的内容（将其复制到选项的标题中）并在选择焦点上恢复它。

代码：

<html><head><title>Auto size select</title>

<script>
var resized = false;

function resizeSelect(selected) {
  if (resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].title=sel.options[i].innerHTML;
    if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
  }
  resized = true;
  sel.blur();
}

function restoreSelect() {
  if (!resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].innerHTML=sel.options[i].title;
  }  
  resized = false;
}
</script>

</head>
<body onload="resizeSelect(this.selectedItem)">
<select id="select" 
  onchange="resizeSelect(this.selectedItem)"
  onblur="resizeSelect(this.selectedItem)"
  onfocus="restoreSelect()">
<option>text text</option>
<option>text text text text text</option>
<option>text text text </option>
<option>text text text text </option>
<option>text</option>
<option>text text text text text text text text text</option>
<option>text text</option>
</select>
</body></html>

调整选择框的大小以拥抱选择的文本

1 个答案: