semantic-ui - 语义 UI:无法通过可搜索的下拉菜单“选项卡”
问题描述
我连续有多个下拉菜单,我想允许用户使用制表键从一个字段移动到另一个字段。
下拉菜单与文本匹配,允许全文搜索并且可以清除。
选项卡确实有效,但不幸的是,当通过下拉列表进行选项卡时,第一个值会自动选择:
<!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
我可以得到一个非常有希望的选项,但是当只有一个选项(左)时,无法做出选择。
有没有人知道允许用户在不选择第一个选项的情况下通过下拉列表进行选项卡的配置?使用 Semantic-UI 还是 Fomantic-UI?
解决方案
这个 Fomantic-UI 问题让我走上了正确的道路:
解决方案是设置forceSelection
为false
:
$('form .ui.dropdown').dropdown({
match: 'text',
clearable: true,
forceSelection: false
});
推荐阅读
- javascript - 如何使用 html 按钮启动节点 js 命令?
- google-analytics - 一旦页面加载,UTM 参数就会从 URL 中消失
- python - 如何在没有额外点的情况下对带有孔的多边形进行三角剖分
- angular - 以 HHH:MM 格式输入小时的 Angular 自定义验证器
- python - 在 Python 中导入模块时运行一个函数
- hadoop - Impala 表小文件问题
- python - 使用多个熊猫系列的加权和?
- flutter - 为什么在我的 GitHub 存储库中生成了 .has .vscode 文件夹?
- python - 元组到 CSV 文件
- bash - 为标准输出的每一行加时间戳