dropdownbox 相关问题

我正在尝试制作一个自定义下拉框/选择菜单，让我可以拥有圆形选项。我已经快完成了，但它的侧面有一个小故障：这是我的代码：我正在尝试制作一个自定义下拉框/选择菜单，让我可以拥有圆形选项。我快完成了，但它的侧面有一个小故障：这是我的代码： <!DOCTYPE html> <html> <head> <title>Custom Select</title> <style> .custom-select { position: relative; display: inline-block; } .select-selected { background-color: white; color: black; padding: 10px; padding-right: 9px; border: 1px solid gray; border-radius: 10px; cursor: pointer; } .select-items { display: none; position: absolute; background-color: white; border: 1px solid gray; border-top: none; border-radius: 0 0 10px 10px; z-index: 999; width: 100%; } .select-items div { padding: 10px; cursor: pointer; } .select-items div:hover { background-color: lightgray; border-radius: 10px; } .select-selected.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const customSelect = document.querySelector(".custom-select"); const selectSelected = customSelect.querySelector(".select-selected"); const selectItems = customSelect.querySelector(".select-items"); const optionDivs = selectItems.querySelectorAll("div"); selectSelected.addEventListener("click", function() { if (selectItems.style.display === "none") { selectItems.style.display = "block"; selectSelected.classList.add("active"); } else { selectItems.style.display = "none"; selectSelected.classList.remove("active"); } }); optionDivs.forEach(function(div) { div.addEventListener("click", function() { const selectedOptionText = div.textContent; selectSelected.textContent = selectedOptionText; selectItems.style.display = "none"; selectSelected.classList.remove("active"); }); }); document.addEventListener('click', function(e) { if (!customSelect.contains(e.target)) { selectItems.style.display = 'none'; selectSelected.classList.remove("active"); } }); }); </script> </head> <body> <div class="custom-select"> <div class="select-selected">Select an option</div> <div class="select-items"> <div>Option 1</div> <div>Option 2</div> <div>Option 3</div> </div> </div> </body> </html> 我尝试了几个“代码修复程序”，但根本不起作用。然后我尝试更改 padding-right 值、边距和其他一些与样式相关的内容。我无法弄清楚这一点。有什么解决办法吗？您可以通过在样式部分的顶部添加这段代码来解决问题： * { box-sizing: border-box; }

html css select drop-down-menu dropdownbox

回答 1 投票 0

当我尝试创建下拉列表时，当页面刷新时所选数据默认为原始状态？

如何在单击“保存”时保留我的选择，而不将其默认为原始状态？例子：如何在单击“保存”时保留我的选择，而不是默认为原始状态？示例： <select id="language" name="language" <option value=""></option <option value="One">One</option <option value="Two">Two</option <option value="Three">Three</option </select> 因此，如果我选择“两个”选项，然后单击“保存”。默认为空白选项。请多多指教我希望下拉列表能够在保存时保留您选择的内容。我不知道如何仅使用html来完成它。我认为这是不可能的。 JS中可以使用本地存储来保存文件。您可以在这里阅读更多相关信息here 当用户在选项块中选择一个元素时，您应该在选择该元素时将其保存在本地存储中，并在打开页面时从中加载并将其插入到选项块中。

html css drop-down-menu dropdown dropdownbox

回答 0 投票 0

如何使用下拉框动态更改所选类别的颜色？

我正在开发一个应用程序，它接受 2 个输入来更新显示聚类分析结果的散点图。第一个输入通过时间范围滑块过滤图表上的点。 ...

python colors cluster-analysis plotly-dash dropdownbox

回答 1 投票 0

带有搜索框的单下拉列表

我想将搜索框添加到单个选择下拉选项中。代码：选择 {% for key, value in dr.item... 我想将搜索框添加到单个选择下拉选项中。代码： <select id="widget_for" name="{{widget_for}}"> <option value="">select</option> {% for key, value in dr.items %} <input placeholder="This "> <option value="{% firstof value.id key %}" {% if key in selected_value %}selected{% endif %}>{% firstof value.name value %}</option> {% endfor %} </select> 如上所述添加输入标签不起作用。我试过使用 html5-datalist 并且它有效。我想要一些其他选项，因为 html5-datalist 不支持 chrome 中的可滚动选项。任何人都可以建议任何其他搜索框选项吗？它们应该与 django-python 框架兼容。还有一个纯 HTML 解决方案您可以使用 datalist 元素来显示建议： <div> <datalist id="suggestions"> <option>First option</option> <option>Second Option</option> </datalist> <input autoComplete="on" list="suggestions"/> </div> 注意：确保input中list属性的值与datalist的id相同请注意，并非所有浏览器都（完全）支持数据列表元素，正如您在我可以使用上看到的那样。只需使用 select2 插件即可实现此功能插件链接：Select2 如果你不喜欢外部库，你可以使用HTML5元素datalist. 来自W3School的例子： <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> 我使用 HTML 和 CSS 制作了一个自定义下拉列表，顶部带有搜索标签，固定在下拉列表的顶部。您可以将以下 HTML 和 CSS 与引导程序一起使用：- <div class="dropdown dropdown-scroll"> <button class="btn btn-default event-button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <span>Search</span> <span class="caret"></span> </button> <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <div class="input-group input-group-sm search-control"> <span class="input-group-addon"> <span class="glyphicon glyphicon-search"></span> </span> <input type="text" class="form-control" placeholder="Search"> </div> <ul class="dropdown-list"> <li role="presentation" ng-repeat='item in items | filter:eventSearch'> <a>{{item}}</a> </li> </ul> </div> 上面代码的CSS是：- .dropdown.dropdown-scroll .dropdown-list{ max-height: 233px; overflow-y: auto; list-style-type: none; padding-left: 10px; margin-bottom: 0px; } .dropdown-list li{ font-size: 14px; height: 20px; } .dropdown-list li > a{ color: black; } .dropdown-list a:hover{ color: black; } .dropdown-list li:hover{ background-color: lightgray; } 你可以使用semantic ui来实现这个功能 https://semantic-ui.com/introduction/new.html 使用Select2。安装过程点击这里

javascript jquery html dropdownbox search-box

回答 0 投票 0

如何在 powerapps 中填充组合框的选项？

新手业务用户：我正在尝试在 Microsoft PowerApps for Teams 中建立一个按日期分隔的计划。它看起来有点像机场的到达/出发板。我需要我的使用...

combobox microsoft-teams dropdownbox powerapps-formula nested-table

回答 1 投票 0

自动重置下拉列表以显示第一行（选项）

希望您能提供帮助。首先，请原谅我缺乏理解力，因为我不是程序员，也不了解VBA。我正在寻找的是一段将重置下拉列表的代码...

excel list validation drop-down-menu dropdownbox

回答 1 投票 1

（（已解决）如何在选中时隐藏基于CheckBox的值，包括必需的（包括下拉框版本）]

我希望在选中复选框时显示文本区域，而在未选中时隐藏它们。该界面可以运行，但是该复选框不可单击。 $（document）.ready（function（）{$（'＃...