javascript - 选择选项后禁止关闭选择框

Question

我得到一个带有未定义数量的选项的选择框。

示例
我的选择框包含 50 个具有不同值的选项。我所做的只是显示选项 1-10 和 25-30。其他人是分开的。通过单击选项 30，附加了分离的选项。

我的问题是选择框在选择后会像往常一样关闭。有没有办法抑制这种行为？

如果单击选项 30 并且分离的选项将显示在选项 30 下方而不关闭选择框，那将是非常棒的。

Answer 1

您可以尝试将选择框设置为多选框。然后选择第30项显示其他项目时。

如果您真的附加到使用常规选择框，那么您可以通过<option>在所选使用JavaScript加载和重新下拉列表时，通过“更多选项...”来生成该操作。

如果您提供一些示例代码，我可以举一个例子，也许

Answer 2

我不确定选择下拉菜单是否是满足您要求的最佳元素。您可能需要考虑在其溢出属性设置为滚动的 div 中使用复选框列表。这可能对你更好。获得一个下拉菜单来做你所要求的有点复杂。例如看这个小提琴

示例 html

<div id="container">
    <label><input type="checkbox" name="test" value="1" />Option 1</label>
    <label><input type="checkbox" name="test" value="2" />Option 2</label>
    <label><input type="checkbox" name="test" value="3" />Option 3</label>
    <label><input type="checkbox" name="test" value="4" />Option 4</label>
    <label><input type="checkbox" name="test" value="5" />Option 5</label>
    <label><input type="checkbox" name="test" value="6" />Option 6</label>
    <label><input type="checkbox" name="test" value="7" />Option 7</label>
    <label><input type="checkbox" name="test" value="8" />Option 8</label>
    <label><input type="checkbox" name="test" value="9" />Option 9</label>
    <label><input type="checkbox" name="test" value="10" />Option 10</label>
    <label><input type="checkbox" name="test" value="11" />Option 11</label>
    <label><input type="checkbox" name="test" value="12" />Option 12</label>
</div>

CSS

label{display:block;}
#container{height:100px;width:200px;overflow:scroll;}