HTML 多选框

2024-04-19

我只是想知道下面的表格的名称是什么?我从早上就在谷歌上搜索 HTML 表单列表,但我在任何地方都找不到这种表单。谁能告诉我这个表单的确切名称以及它是否可以在 HTML 表单中使用?

我只想在我的网站中添加这种形式。它适用于 HTML 还是我应该使用 JavaScript 还是它仅适用于 Windows 应用程序?


这是一个可以帮助您入门的小示例:http://jsfiddle.net/eUDRV/3/ http://jsfiddle.net/eUDRV/3/

此示例会将项目(一个或多个)从左向右移动,然后再返回。无论在右侧选择什么项目,都会更新右侧的文本框。

我们正在使用以下元素:

  • select
  • input type="button"
  • input type="text"

框架由:

  • div
  • section

使用简单的 CSS 进行样式设置。功能由 JavaScript 提供。

我使用 jQuery 库让事情变得更容易一些。这也可以使用纯 JavaScript 来完成。

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#txtRight").val(selectedItem.text());
});
SELECT, INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}
SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}
SECTION > DIV {
    float: left;
    padding: 4px;
}
SECTION > DIV + DIV {
    width: 40px;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="container">
    <div>
        <select id="leftValues" size="5" multiple></select>
    </div>
    <div>
        <input type="button" id="btnLeft" value="&lt;&lt;" />
        <input type="button" id="btnRight" value="&gt;&gt;" />
    </div>
    <div>
        <select id="rightValues" size="4" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <div>
            <input type="text" id="txtRight" />
        </div>
    </div>
</section>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 多选框 的相关文章

  • GWT - 如何组织项目以拥有多个网页以及它们之间的导航

    我是 GET 的新手 顺便说一句 它给我留下了深刻的印象 并且发现它对于像我这样熟悉 C NET 桌面技术并愿意编写 Web 应用程序的人来说非常有吸引力 我根据 GWT Eclipse 向导生成的示例启动了自己的项目 该项目生成带有面板的
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • Jquery 在 DIV 中进行多重加载

    这是我的代码 right load textes html nicolas right load textes html antoine 问题是内容divantoine覆盖了右边div nicolas加载的内容div div right l
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • PHP文件上传

    如果我想在文件名转到服务器的永久位置 而不是临时位置 之前更改文件名 我该如何执行此操作 代码如下
  • 强制输入数字小数位

    我想强制
  • 将html表格保存到excel中[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我必须编写一个程序 定期读取网页并将
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • HTML5 仅拖放图像

    我想做的是 如果所有拖动的文件都是图像 则将其删除 但如果有其他文件扩展名 则不要删除它们 而仅删除图像 这是我的尝试 HTML div div JavaScript var dropzone document getElementById
  • 如何使用 HTML 5 实现类似 gmail 的文件上传/附件

    我记得一些支持 Ajax 之类的选项 无回发世界 文件上传 隐藏的 iframe 使用 flash 对象 尽管我仍然好奇为什么使用 SWF 以及它提供什么优势 然而 通过查看博客 HTML 5 似乎很有前途 我尝试了一些小示例 它确实有效
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 使用 HTML5(数据列表)自动完成功能和“包含”方法,而不仅仅是“开头为”

    我找不到它 但我又不知道如何搜索它 我想用
  • 将html数据解析成python列表进行操作

    我正在尝试读取 html 网站并提取其数据 例如 我想查看公司过去 5 年的 EPS 每股收益 基本上 我可以读入它 并且可以使用 BeautifulSoup 或 html2text 创建一个巨大的文本块 然后我想搜索该文件 我一直在使用
  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN
  • HTML 代码中的 PHP [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我用 HTML 代码编写了 PHP div div 但这出现在输出页面中 else print 我怎样才能让PHP执行 你的文件有一个 p
  • PHP 中的多个插入查询[重复]

    这个问题在这里已经有答案了 我正在尝试创建一个 php html 表单 它将结果插入到狗展数据库中 问题是 无论我做什么 我都会收到此错误 查询失败 您的 SQL 语法有错误 检查与您的 MySQL 服务器版本相对应的手册 了解在 INSE
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

随机推荐

  • PHP 中短代码的正则表达式模式

    我编写的用于匹配 PHP 中的短代码的正则表达式有问题 这是模式 其中 shortcode是短代码的名称 shortcode shortcode 现在 这个正则表达式对于这些格式表现得非常好 shortcode shortcode valu
  • 为什么不能在 svg 路径元素上使用transform:translateZ?

    我想对内联 svg 元素的部分进行动画处理 我认为你可以在 svg 路径元素上使用 css 转换 从而为 svg 的部分设置动画 这真的很酷 但在使用它之后 我遇到了 translateZ 函数的问题 由于某种原因 在路径元素上使用第三维似
  • 如何删除材料设计按钮中的额外填充或边距?

    我正在尝试创建一个附加到按钮上方的 TextView 的按钮 如下图所示 上面的截图取自Note 4 操作系统版本为5 0 1 下面是用于实现UI的代码 布局 xyz xml
  • C++ 编码指南 102

    如果您被允许在 101 条准则中添加另一个编码准 则 C 编码标准 Herb Sutter 和 Andrei Alexandrescu http www gotw ca publications c cs htm 您会添加哪一个 一年后再写
  • 模板什么时候结束?

    模板什么时候结束 我们来看看这段代码 template
  • 带有 vararg observables 的 RxJava zip

    当我们确切地知道有多少个具有确切类型的可观察量并且我们想要压缩时 我们会这样做 Observable
  • JetBrains IDE 启动时出错:应用程序无法正确启动 (0xc000007b)

    我遇到了这个错误 但在重新安装 IDE 两次后几乎找不到解决方案 甚至我安装了 多合一运行时 但这也无济于事 因为我认为问题最初是在我更改了 Windows Defender 设置中的一些设置后开始的然后尝试重置它们 但肯定其他人报告了这个
  • lambda:通过引用捕获 const 引用是否应该产生未定义的行为?

    我刚刚在代码中发现了一个令人讨厌的错误 因为我通过引用捕获了对字符串的 const 引用 当 lambda 运行时 原始字符串对象已经消失了 引用的值是空的 而目的是它包含原始字符串的值 因此出现了错误 让我困惑的是 这并没有在运行时引发崩
  • BigInteger 数字的实现和性能

    我用 C 编写了一个 BigInteger 类 它应该能够对任何大小的所有数字进行运算 目前 我正在尝试通过比较现有算法并测试它们最适合哪些位数来实现非常快速的乘法方法 但我遇到了非常意外的结果 我尝试进行 20 次 500 位数字的乘法
  • Inflector.Net 的替代品

    我想在我的项目中使用 inflector net 刚刚谷歌了一下 好像已经消失了 http andrewpeters net inflectornet http andrewpeters net inflectornet 还有其他选择吗 编
  • Chrome 开发工具中的 __puppeteer_evaluation_script__ 为空

    Puppeteer 版本 9 0 0 将调试器放入 JavaScript 代码并启动 puppeteer 时 chrome 开发工具中的源代码为空 使用 Node 运行脚本 scripts test echo Error no test s
  • Docker 和 Python virtualenv 有什么区别?

    根据我对Docker的理解 它是一个用于虚拟环境的工具 用他们的行话来说 这称为 容器化 这或多或少就是 Python 的 virtualenv 所做的事情 但是 您可以使用 virtualenvin码头工人 那么 它是虚拟环境中的虚拟环境
  • 如何监控 Tomcat 服务器上的多个 Web 应用程序(使用 JMX)?

    有没有办法监控单个 Web 应用程序的 CPU 和内存消耗Tomcat server I have Tomcat打开其 JVM 下的所有 Web 应用程序 因此我只能看到一个 JVM 无法单独监控每个 Web 应用程序 Web 应用程序是密
  • jquery中删除多个元素

    在我当前的代码中我有这样的 foo remove bar remove 有没有办法通过使用删除多个元素remove once 它不限于 remove 但只需用逗号分隔选择器 foo bar remove 多重选择器 选择器1 选择器2 选择
  • 如何调整 UIImageView 的大小以适应底层图像而不移动它?

    我有一个 UIImageView 其框架在加载图像之前设置 对于图像来说总是太大 因此 例如 当我尝试圆角时 什么也没有发生 如何调整框架大小 使其与底层图像的大小相同 同时确保 UIImageView 的中心点不会改变 如果更改 UIVi
  • CPython的静态对象地址和碎片

    I read 对于Python来说 if x 是存储x的内存地址 这是给定的id对象的属性永远不会改变 这意味着对象在其生命周期中始终存储在给定的内存地址中 这就引出了一个问题 虚拟 内存碎片怎么样 说一个物体A位于地址 1 有id1 占用
  • IIS7的工作进程是什么?

    我正在尝试在 Visual Studio 2008 中执行 附加到进程 进行调试 但我无法弄清楚要附加到哪个进程 帮助 事实上它仍然是 w3wp exe 您需要检查 显示所有会话中的进程 让它显示的选项 这也让我困惑了一段时间
  • 如果不调用notify(),等待线程会发生什么?

    如果不调用notify 等待线程会发生什么 这是虚假唤醒吗 If a waiting Thread is not notified通过致电notify or notifyAll 在所述线程正在等待的对象上 则可能会发生以下任一情况 the
  • Chrome 调试协议:HeapProfiler.getHeapSnapshot 忽略回调

    我正在开发一个测试套件 作为 Chrome 扩展实现 该套件使用 Chrome Chromium 的远程调试协议以编程方式获取和分析堆快照 因为Profiler 似乎不是公共协议的一部分 我正在使用这一页 http trac webkit
  • HTML 多选框

    我只是想知道下面的表格的名称是什么 我从早上就在谷歌上搜索 HTML 表单列表 但我在任何地方都找不到这种表单 谁能告诉我这个表单的确切名称以及它是否可以在 HTML 表单中使用 我只想在我的网站中添加这种形式 它适用于 HTML 还是我应