我有一个固定宽度的空select组件,其中包含Javascript添加的选项.默认情况下,它使用滚动条.加载页面时,此元素的高度不太合适.添加选项后,select元素将调整到正确的高度,并一直保持这种状态,直到重新加载页面或清除选项列表.有没有办法让 Select 器加载到正确的高度without,用一个选项初始化它?

function addOpt() {
  let selector = document.getElementById("selector");
  let opt = document.createElement("option");
  opt.innerHTML = "New option";
  selector.appendChild(opt);
}
<select size="8" style="width: 250px;" id="selector">
</select>
<br /><br />
<button type="button" onclick="addOpt()">Click me</button>

推荐答案

try 以下操作:

<!DOCTYPE html>
<html lang="es">
<head>
    <script type="text/javascript">
        function getSelectHeight(rowsCount) {
            var rowsHtml = '';
            for (var i = 0; i < rowsCount; i++)
                rowsHtml += '<option>.</option>';

            var div = document.createElement('div');
            div.innerHTML = '<select size="' + rowsCount + '" style="width: 250px;visibility:hidden">' + rowsHtml + '</select>';
            document.body.after(div);

            var height = div.offsetHeight;
            div.remove();
            return height;
        }

        function setSelectorHeight() {
            var select = document.getElementById('selector');
            var rowsCount = select.getAttribute('size');
            select.style.height = getSelectHeight(rowsCount) + 'px';
        }

        function addOpt() {

            let selector = document.getElementById("selector");
            let opt = document.createElement("option");
            opt.innerHTML = "New option";
            selector.appendChild(opt);
        }
    </script>
</head>
<body onload="setSelectorHeight()">

    <select size="8" style="width: 250px" id="selector"></select>

    <button type="button" onclick="addOpt()">Click me</button>

</body>
</html>

getSelectHeight给出指定rowsCount的 Select 器的实际高度.在这里,我们添加了一个包含rowsCount个项目的不可见 Select 器,获取它的实际高度并删除该 Select 器.

在body onload上运行setSelectorHeight:找到 Select 器,判断行数(size属性)并设置 Select 器的高度.我使用这种风格是因为设置offsetHeight不起作用.

Html相关问答推荐

当在双引号|Angular .html文件中使用时,Pretier会将单引号字符替换为&;Quot;

使用无限数量的元素创建特定的CSS网格

如何翻转卡片图像的背面

Div中的图像问题-(TailWind CSS中的网格)

如何创建剪切到路径的循环文本字幕?

水平行中按钮的垂直偏移

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

排列卡片时遇到困难

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

对齐页面左侧的单选按钮

如何将两个平行 div 的页面内的表格居中?

获取 div 中每个元素的 href 并使用它

在 jinja 模板内的 html 表中嵌套 For 循环

如何让 Reindeer 居中

圆形边框显示在该部分后面.怎么修?

正确使用视频作为背景

svg 内容超过元素

粘性定位的子元素忽略父母的填充

在 Vue 3 中使用 JavaScript 数组显示 FontAwesome 图标