Javascript 将选择元素宽度设置为它'；s选项'；动态调整内容宽度

我试图使选择元素的宽度等于它的选项文本的角度宽度

我的HTML组件如下所示：

<form [formGroup]="profileForm">
  ...
  <select (change)="adjustSelectWidth($event.target)" formControlName="members">
    <option value="1">Me</option>
    <option value="2">Me, my spouse</option>
    <option value="3">Me, my spouse and my kids</option>
  </select>
  ...
</form>

• 获取选项的

  innerHTML

  长度，然后使用固定像素对其进行多重化，但这不是一个动态选项

• 将选项的

  innerHTML

  附加到span元素以测量宽度，但是当我将span

  clientWidth

  应用到select元素时，该span

  clientWidth不准确

因为我使用angular，所以我不喜欢使用JQuery。另外，为什么

clientWidth

似乎不能解决我的问题

---

我创建了一个stackbliz示例：

有一种测量文本宽度的方法。我认为它足够可靠，但在性能方面可能有点贵，当然这取决于你的应用程序。（Stackblitz中过于简单的示例没有性能问题。）

方法是在包含要测量的文本的文档中实际附加一个隐藏元素，读取

clientWidth

，然后立即删除该元素

修改

adjustSelectWidth（）

，如下所示：

adjustSelectWidth(e: HTMLSelectElement){
  // assuming something is always selected, please test!
  const displayedText = e.options[e.selectedIndex].innerText;
  const dummy = document.createElement('div');
  dummy.innerText = displayedText;
  dummy.style.position = 'absolute';
  dummy.style.visibility = 'hidden';
  document.body.insertBefore(dummy, document.body.firstChild);
  const measuredWidth = dummy.clientWidth;
  document.body.removeChild(dummy);
  e.style.width = (measuredWidth + 30) + 'px'
}

---

修改后的Stackblitz:-在最新的Firefox、Chrome、Edge中进行了测试，感谢您的解决方案，但“选择宽度”的末尾似乎有一个附加宽度，该宽度的放大取决于文本的长度，不等于您添加到其中的30px。你能分享一下这种行为是如何发生的吗？哦，我想出来了，这是因为跨度的字体大小大于选定元素的字体大小。非常感谢。另外，我认为您可以添加

document.body.removeChild（dummy）虚拟对象的宽度之前，

removalHo！我正在清理代码并删除了

removeChilde（dummy）

调用！感谢注意，将修改答案+Stackblitz！

export class AppComponent  {
  profileForm = new FormGroup({
    members : new FormControl(''),
  })

  adjustSelectWidth(e){
    const optionValue = this.profileForm.get('members').value;
    const optionTextLength = document.querySelector(`option[value="${optionValue}"]`).innerHTML.length;
    e.style.width= optionTextLength*8 + "px";
  }
}

export class AppComponent  {
  //This temp is bind to a span via string interpolation {{...}}
  temp:string;

  profileForm = new FormGroup({
    members : new FormControl(''),
  })

  adjustSelectWidth(e){
    const optionValue = this.profileForm.get('members').value;
    const optionText = document.querySelector(`option[value="${optionValue}"]`).innerHTML;
    this.temp = optionText;
    const spanWidth = document.querySelector(`.temp`).clientWidth;
    e.style.width = spanWidth + "px";
  }
}

adjustSelectWidth(e: HTMLSelectElement){
  // assuming something is always selected, please test!
  const displayedText = e.options[e.selectedIndex].innerText;
  const dummy = document.createElement('div');
  dummy.innerText = displayedText;
  dummy.style.position = 'absolute';
  dummy.style.visibility = 'hidden';
  document.body.insertBefore(dummy, document.body.firstChild);
  const measuredWidth = dummy.clientWidth;
  document.body.removeChild(dummy);
  e.style.width = (measuredWidth + 30) + 'px'
}