如何解决语义用户界面:无法通过可搜索的下拉菜单“标签”
我在一行中有多个下拉列表,我希望允许用户使用制表键从一个字段移动到另一个字段。
制表符确实有效,但不幸的是,当制表符浏览下拉列表时,第一个值会被自动选择:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>Semantic UI: tabbing through select Boxes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<form>
<select class="ui search dropdown">
<option value="">choose one</option>
<option value="1">abc</option>
<option value="2">bcd</option>
<option value="3">cde</option>
</select>
<select class="ui search dropdown">
<option value="">choose one</option>
<option value="1">ababa</option>
<option value="2">cdcdcd</option>
<option value="3">efefef</option>
</select>
<select class="ui search dropdown">
<option value="">choose one</option>
<option value="1">ababa</option>
<option value="2">cdcdcd</option>
<option value="3">efefef</option>
</select>
</form>
<script>
window.onload = () => {
$('form .ui.dropdown').dropdown({
match: 'text',clearable: true
});
}
</script>
</body>
</html>
我已经尝试了 Semantic UI 和 Fomantic UI 的多种设置组合,但我找不到任何允许可搜索下拉菜单的组合。
通过查看 action
的不同选项,我可以找到一个非常有希望的选项,但是,如果只有一个选项(左),则无法做出选择。
有没有人知道允许用户在没有选择第一个选项的情况下浏览下拉列表的配置?使用语义用户界面还是语义用户界面?
解决方法
这个 Fomantic-UI 问题让我走上了正确的道路:
[Dropdown] Search selection selects first item on close
解决方法是将forceSelection
设置为false
:
$('form .ui.dropdown').dropdown({
match: 'text',clearable: true,forceSelection: false
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。