选择位置更改时如何对齐选择框

Question

我发现原生html select元素有一个有趣的问题。 当您单击选中项时，选中项的位置会发生变化，但是选中项下的框不会更改以使其与之对齐的位置。

这是一个简单的代码示例。

(() => {
  setTimeout(() => {
    document.getElementById('span').innerText = "Test of metal";
  }, 3000)
})()

<div>
  <span id="span"></span>
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

如何使框与选择本身对齐？有什么解决办法吗？

Answer 1

尝试一下：

    (() => {
  setTimeout(() => {
    document.getElementById('span').innerText = "Test of metal",
    document.getElementById('select_id');
  }, 3000)
  
})()

<div>
  <span id="span"></span>
  <select id="select_id">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

将3000值更改为更快的文本显示方式