在html中使用jquery显示多个选择值
在HTML中使用jQuery显示多个选择值可以通过以下步骤实现：
- 首先，确保已经引入了jQuery库文件。可以在HTML文件中的<head>标签中添加以下代码：
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>这是使用CDN引入jQuery库的方式，你也可以将jQuery库下载到本地并引入。
- 在HTML中定义一个容器来显示选择值。可以使用<div>标签或其他合适的标签，例如：
<div id="selectedValues"></div>这个容器的id属性可以自定义，这里使用了"selectedValues"作为示例。
- 编写JavaScript代码来获取选择值并显示在容器中。可以使用jQuery的选择器和事件处理函数来实现。以下是示例代码：
$(document).ready(function() {
$('input[name="option"]:checked').each(function() {
var value = $(this).val();
$('#selectedValues').append(value + '<br>');
});
});这段代码使用了.ready()方法来确保文档加载完毕后执行。选择器'input[name="option"]:checked'选中了所有被选中的名为"option"的输入元素。使用.each()方法遍历选中的元素，并使用.val()方法获取值。最后，使用.append()方法将值添加到容器中，并使用'<br>'换行。
以上代码的解释如下：
- $('input[name="option"]:checked')：选择器选中了所有被选中的名为"option"的输入元素。
- .each(function() { ... })：遍历选中的元素，并为每个元素执行函数。
- var value = $(this).val()：获取当前元素的值。
- $('#selectedValues').append(value + '<br>')：将值添加到容器中，并换行。
这样，当用户选择了多个选项后，选中的值将会以每个值一行的形式显示在容器中。
推荐的腾讯云相关产品：腾讯云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云开发（https://cloud.tencent.com/product/tcb）。
请注意，以上回答仅为示例，具体实现方法可能因应用场景和需求而有所变化。
相关·内容
我希望通过第一次选择显示在中选择的值，如果用户在第二次选择中选择了一个值，它将位于第一个值之后。 我有多个选择值，我将用select的值替换类".search_person“中的文本。所以如果你在第一个选择选项2中选择，我想用jquery<
浏览 13提问于2019-03-20得票数 0
回答已采纳
在html中，您可以将多个css类应用于一个对象，例如class="a b c"。在jquery中，使用这些类处理所有元素是非常方便的。jQuery('.b').hide();
在使用自定义属性的HTML5中，jQuery似乎将多个值(例如dataset="a
浏览 2提问于2014-11-28得票数 1
回答已采纳
2回答
我只是进入JS/jquery并尝试基于多个复选框选择来显示页面元素。我希望所有元素从未选中的所有复选框开始显示，然后在进行一个或多个复选框选择时，只显示所选div类的元素(除非所有复选框都未选中，否则所有其他元素都将隐藏)。我所处的陷阱是，它是反向工作的，因此，当我以未选中的所有显示和复选框开始时，我会选中一个(或多个)，所选值的元素将消失。
更复杂的陷阱是，一些元素可能
浏览 3提问于2020-07-27得票数 1
回答已采纳
1回答
我需要帮助jquery从Jquery下拉列表中选择多个选项。我目前可以使用jquery从选项列表中选择单个值。但我需要能够选择一个选项选择的项目列表。例如，在下面的示例中，我可以选择很好的值。如何在用户选择时使用选择框显示每个国家的产品。想法是为用户获得产品的数量显示在下拉列
浏览 1提问于2017-04-15得票数 0
我使用jquery库magicsearch在inupt中选择多个值。我想知道如何在变量中检索这些值。我的html如下所示：
<input type="text" class="form-control col-md-8 magicsearch" id="person" name="person" />在jqu
浏览 0提问于2019-03-21得票数 1
回答已采纳
1回答
将选择器中的多个选择存储在数组中
、、、、
我有一个拉拉选择使用选择选择多个选择。我试图使用jquery在数组中显示select选择器的值。[];$('#tdSpoken').html(d
浏览 0提问于2015-07-16得票数 1
回答已采纳
我使用的是在html页面上选择的jquery选择，用户可以在其中选择多个选项并保存记录。我需要显示一个更新页面给用户，并试图让多选择选择下拉与存储的选项预选。对于所选的单个选择，可以按以下方式触发更新： $('#ns_StatusClass').trigger("chos
浏览 5提问于2014-10-28得票数 5
回答已采纳
我在我的web应用程序中使用了'wicket‘框架。wicket模型，在选择第一个模型中的值之后，动态加载第二个模型的值。第二个是多选(使用wicket的ListMultipleChoice创建)。为了在不按ctrl键的情况下选择多个值，我在html头文件中添加了以下内容：
<script src="h
浏览 0提问于2013-05-23得票数 0
回答已采纳
我有一个html选择，其中启用了多个选择选项。我想要显示在数据库中选择的值。<select id="year_selected" tabindex="14" name="year_selected" multiple=
浏览 0提问于2013-08-15得票数 0
2回答
如何使用在多选下拉列表中设置值。我正在使用jquery.I视图显示多选下拉列表，并使用jquery.I这个多选插件。<div class="editor-field">
@Html.DropDownListFor(model => model.ActionId, (SelectList)ViewBag.ActionsList(model => model.Action
浏览 0提问于2013-10-11得票数 0
1回答
有人知道如何从单个选择文件(上传)更改为多个上传文件吗？我在用MultiFile.js。这个库可以用于多个选定的文件吗？因为我在HTML中做了多次操作，但是当我选择多个文件时，它只显示第一个文件名，而不是所有选定的文件。我是否有可能循环使用jquery代码或其他任何东西？下面是我正在使用的jquery
$(function(){ /
浏览 3提问于2013-11-04得票数 0
我是一个php开发人员，使用多个选择框，我想当我们从选择框中选择多个选项时，每个选择框的值都应该显示在文本框中如何用jquery做这件事，如果有人有这个感谢的解决方案，请帮助
浏览 4提问于2010-06-04得票数 0
我创建了一个多选择的下拉框和一个button.If，您选择多个值并单击按钮，然后它将显示在it.My jQuery代码下面，如下所示： inheritClass: true
jQ
浏览 4提问于2015-05-13得票数 0
2回答
我有一个带有N个单选按钮的jquery模板，我需要选择带有值的单选按钮，在从外部html文件加载模板后传递该单选按钮(使用jQuery.tmpl()方法)。有没有在模板中选择单选按钮的好方法，没有多个{{if}}，{{else}}语句，重复的代码和选择器？
浏览 2提问于2011-08-10得票数 1
回答已采纳
1回答
在我的应用程序中，我使用了Jquery选择的插件，它在我们的表单中提供了一些漂亮的多个选择。select可以填充一些选项，用户可以选择其中的一个或多个选项。
浏览 2提问于2015-03-10得票数 1
回答已采纳
2回答
不带表单标记验证下拉列表
、、、
我们提供一个选项，让用户选择“品牌与模型”并点击“查看案例”按钮，根据选择的选项，它将重定向到正确的网址。在这里，如果我们直接点击“查看案例”，而没有选择品牌和模型，它重定向到一些错误的url，在这里，我们想添加这两个下拉列表的验证。我们这里没有使用任何形式的标签。 }); {
jQuery("#myDivLoader").html('<i
浏览 2提问于2017-01-16得票数 0
回答已采纳
Html5选择元素应该：
我尝试了下面的Chrome代码。选择13111 Receiveables后，在输入框中显示13111 Receiveables。如何解决这个问题，以便在选择13111 Receiveables后，字
浏览 3提问于2016-03-26得票数 0
回答已采纳
1回答
我试图显示/隐藏一个div元素的选择变化，这取决于值，这是好的，但问题是，我使用多个选择框单页和更改，所有的值显示同时隐藏。为此，我这样做： jQuery('.selector').change(function(){
jQuery('.inv').hide();jQuery</em
浏览 1提问于2022-06-25得票数 0
1回答
我正在为具有多个类别(在列表中预先定义的)的Company对象创建一个编辑页面。我已经通过ViewBag发送了列表，并且通过ViewModel在创建页面中选择了用户选择的类别。我无法找到让ListBox预先填充数组中的多个值的方法。我正在使用jQuery，并且能够获得要选择的值之一，但是当我尝试不止一次时，什么都不会出现。有什么想法吗？@Html
浏览 0提问于2014-07-22得票数 1
回答已采纳
2回答
我的页面中有以下结构：大小那是，现在，你省了点钱 var n = parseFloat(youSave).toFixed(2);
$
浏览 2提问于2015-11-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
