为带搜索框的下拉菜单添加滚动条，限制显示约10个选项

当前下拉菜单功能正常，但选项过多，需要限制仅显示约10个选项，超出部分通过滚动查看。

解决方案 #

核心是通过CSS设置最大高度并启用垂直滚动，推荐将搜索框与选项区域分离，保证搜索框始终可见：

1. 调整HTML结构 #

给选项添加单独的容器包裹，避免搜索框随选项滚动：

<div class="location-dropdown dropdown">
    <button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site_network_status['sitename']}}</button>
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
        <!-- 新增容器包裹所有选项 -->
        <div class="dropdown-options">
            <a class="dropdown-item" href="link1">link1</a>
            <a class="dropdown-item" href="link2">link2</a>
            <!-- 更多选项... -->
        </div>
    </div>
</div>

2. 修改CSS样式 #

为新增的选项容器设置最大高度和滚动属性：

.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

#myInput {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
    /* 移除原overflow:auto，由子容器负责滚动 */
}

/* 新增选项容器样式 */
.dropdown-options {
    max-height: 360px; /* 按每个选项约36px计算，刚好容纳10个，可根据实际样式调整 */
    overflow-y: auto;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

简化方案（无需修改HTML） #

如果不想调整HTML结构，可直接给.dropdown-content设置最大高度，缺点是搜索框会随选项滚动：

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow-y: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 420px; /* 包含搜索框高度，需根据实际调整 */
}

内容的提问来源于stack exchange，提问作者red wing