是否可以一次显示 HTML 选择表单字段中的所有选项,而无需单击它?

2024-05-06

我正在使用 X-Editable jQuery 就地编辑库作为任务状态选择字段。整个过程的所有阶段如下所示:

  1. 单击状态
  2. 然后,它隐藏状态 SPAN 并显示隐藏的选择字段。
  3. 您可以单击选择字段,使其下拉并显示所有可用选项。
  4. 单击新的选择选项值,然后显示加载旋转图像,同时发出 AJAX 请求来保存该值
  5. 然后显示新选择的状态值 SPAN。
  6. 再次单击将重新启动循环/过程。

然而,我试图想出一种更好的方法来选择新值。只有 3 个选择选项,因此我希望一次显示所有 3 个项目,而不是要求您单击下拉列表来查看其他 2 个选项。

是否可以通过基本选择来做到这一点,或者是否需要多选 field?


http://jsfiddle.net/n1k5cLx0/ http://jsfiddle.net/n1k5cLx0/

您是在寻找列表还是仍然想要一个默认显示选项的下拉列表。对于列表样式,您可以将 size 属性与 select 元素一起使用。

HTML

<select size="3">
  <option>Not Started</option>
  <option selected>In Progess</option>
  <option>Completed</option>
</select>

CSS

select{
    overflow:auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以一次显示 HTML 选择表单字段中的所有选项,而无需单击它? 的相关文章

随机推荐

  • 列出 chrome 注册的 Service Worker

    有没有办法列出所有注册服务人员的浏览器 假设我已经注册 安装了一些服务人员 我可以通过js获取文件名数组列表吗 显然我找到了两种适合我的方法 对于 Chrome 一种是使用快捷命令 chrome serviceworker internal
  • MVVM 路由和中继命令

    两者有什么区别路由命令 http msdn microsoft com en us library system windows input routedcommand aspx and 中继命令 http msdn microsoft c
  • 使用 Cloudformation SAM 的 AWS::Serverless::Api 资源策略

    最近AWS宣布 是否可以将资源策略附加到通过 Cloudformation 使用 SAM 创建的 AWS Serverless Api 我还没有机会尝试这个 但我假设您可以像使用 S3 存储桶策略一样使用它 对你来说最棘手的部分是抓住api
  • 编译时映射和逆映射值

    有人可以推荐一种更优雅的方法来实现这些编译时常量吗 template
  • 计算 HBase 表中列族的记录数

    我正在寻找一个 HBase shell 命令来计算指定列族中的记录数 我知道我可以运行 echo scan table name hbase shell grep column family name wc l 然而 这将比标准计数命令运行
  • 如何在 angularFire 0.5.0 和最新的 ng-grid 之间创建 3 路数据绑定?

    angularFire bind 方法可以在这里找到 http angularfire com flatdoc html http angularfire com flatdoc html最新的 ng grid 可以在这里找到 http a
  • 加快写入多个图像 TIFF 的速度?

    我正在尝试将图像堆栈写入 TIFF 文件 图像大小为 256 256 像素 每个堆栈包含 1000 张图像 编写其中一个文件大约需要 4 分钟 所以我的代码很可能有问题 这就是我正在做的 void Tiff WriterSplit floa
  • 如何从 Symfony2 中的数据库加载配置设置?

    我当前在 config yml 文件中有许多设置 展望未来 我希望能够开发一个界面 管理员可以在其中更新这些设置 因此我希望能够通过数据库管理这些设置 我如何能够将这些设置从数据库加载到 Symfony2 中 以及在何时何地加载它们 Che
  • 如何给MySQL表添加主键?

    这是我尝试过的 但失败了 alter table goods add column id int 10 unsigned primary AUTO INCREMENT 有人有提示吗 添加列后 您可以随时添加主键 ALTER TABLE go
  • 如何在 Android 模拟器中模拟真实的外部 SD(更新:可移动存储)卡

    我尝试模拟外部 SD 卡 就像在真实设备中一样 在真实设备中 除非使用新的 存储访问框架 API 21 和 22 否则外部 SD 卡不可写入 当我添加带有文件或大小的 SD 卡时 我总是得到一个可写的 SD 卡 这对于真实的设备来说是不正确
  • 值得学习的优秀 Zend Framework 示例应用程序 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • python:无效的base64编码字符串:数据字符数(5)不能多于4的倍数1

    输出以下错误 异常值 Base64 编码字符串无效 数据字符数 5 不能多于 4 的倍数 1异常位置 b64decode 中的 D Program Files Python lib base64 py 第 87 行 我这样输入 python
  • 使用 ocaml List.fold_left 列表中的最后一个元素

    我可以通过以下代码找到列表的最后一个元素 let last xs a list a let rec aux xs prev match xs with gt prev x ys gt aux ys x in match xs with gt
  • Symfony2 - ReferencedColumnName id 为空

    我要放弃食谱文章了表单集合 http symfony com doc current cookbook form form collections html但是 当尝试将其保留到数据库时 我收到约束冲突错误 引用的列名称 id 为空 SQL
  • 如何将手动更改导入 Terraform 远程状态

    我是 terraform 的新手 我已经在 s3 中创建了远程 tfstate 现在在我的 AWS 基础设施中也完成了一些手动更改 我需要将这些手动更改导入 tfstate 我对某些资源使用了导入命令 但对于某些资源 例如 IAM 策略等
  • 将 NSDictionary 保存到 plist

    我正在使用这篇文章中找到的代码 Plist 中的多个数组 https stackoverflow com questions 6192451 mulitple arrays from plist 6193397 6193397 具有相同的
  • 如何重置 pandas 数据框中的索引? [复制]

    这个问题在这里已经有答案了 我有一个数据框 从中删除了一些行 结果 我得到一个数据帧 其中索引是这样的 1 5 6 10 11 我想将其重置为 0 1 2 3 4 我该怎么做 以下似乎有效 df df reset index del df
  • 查找 Obj-C 中对象实例的所有引用

    我正在尝试找出一些错误 其中之一与内存泄漏有关 我可以看出该对象仍然有一个引用 因为 Instruments 仍然将其显示为活动状态 但 Instruments 不会将其注册为泄漏 无论如何 有没有办法查看 Objective C 中对象的
  • 如何使用 PHP 检测 zip 炸弹?

    我正在制作一个 PHP 脚本 用于检索用户给定的 zip 文件 将其解压缩 并使用其中的文件执行一些操作ZipArchive目的 我怎样才能避免像这样的拉链炸弹42 zip http www unforgettable dk 查看 zip
  • 是否可以一次显示 HTML 选择表单字段中的所有选项,而无需单击它?

    我正在使用 X Editable jQuery 就地编辑库作为任务状态选择字段 整个过程的所有阶段如下所示 单击状态 然后 它隐藏状态 SPAN 并显示隐藏的选择字段 您可以单击选择字段 使其下拉并显示所有可用选项 单击新的选择选项值 然后