首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >可以通过jquery将输入数组传递给另一个输入吗?

可以通过jquery将输入数组传递给另一个输入吗?
EN

Stack Overflow用户
提问于 2016-08-09 20:52:04
回答 3查看 44关注 0票数 0

我有一些类似如下的输入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input name="name1[]" value="1"/>
<input name="name1[]" value="2"/>
<input name="name1[]" value="3"/>

我有另一个类似的输入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <input name="name2" />

我想要在name2中输入name1的值。

我试试这个:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('input[name=name1]').val($('input[name=name2]').val());
EN

回答 3

Stack Overflow用户

发布于 2016-08-09 20:55:32

您不能这样做,因为每个<input/>只能有一个值。我还没有测试过这个,但是如果你测试了呢:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('<input name="name1[]"/>').val($('input[name=name2]').val()).appendTo('form#foo');

实际上,您可以使用新值创建一个新的<input/>,并在提交之前将其添加到表单中。

票数 0
EN

Stack Overflow用户

发布于 2016-08-09 21:17:24

如果我理解正确的话,您希望<input name="name2" />始终使用其他输入中包含的值进行更新。

如果是这种情况,您可以执行以下操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function () {
  $('input[name^=name1]').on('input', function(e) {
    var txt = $('input[name^=name1]').map(function(index, element) {
      return this.value;
    }).get().join(', ');
    $('input[name="name2"]').val(txt);
  }).first().trigger('input');
});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form>
    <input name="name1[]" value="1"/><br>
    <input name="name1[]" value="2"/><br>
    <input name="name1[]" value="3"/><br>
    <input name="name2" /><br>
</form>

如果你需要相反的东西:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function () {
  $('input[name="name2"]').on('input', function(e) {
    $('input[name^="name1"]').val(function(index, value) {
      return value + e.target.value;
    });
  });
});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form>
    <input name="name1[]" value="1"/><br>
    <input name="name1[]" value="2"/><br>
    <input name="name1[]" value="3"/><br>
    <input name="name2" />
</form>

票数 0
EN

Stack Overflow用户

发布于 2016-08-09 21:18:26

当与元素的匹配项一起使用时,.val()将始终考虑第一个匹配项。为了从同一组元素中提取多个值,您需要使用带有function.val()

参考:http://api.jquery.com/val/#val-function

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('input[name=name2]').val(function(index,value)
    {  
      $('input[name="name1[]"]').each(function()
       {
         value += $(this).val();
       });   
       return value;
    });

示例:https://jsfiddle.net/pgyLvx43/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38860215

复制
相关文章
win10 uwp 解决 SerialDevice.FromIdAsync 返回空
调用 SerialDevice.FromIdAsync 可能返回空,因为没有设置 package.appmanifest 可以使用端口
林德熙
2019/03/13
6320
ora00904::标识符无效_ora-00911 无效字符
ORA:即Oracle报错。 标识符无效:SQL语句中,这个字段名不在表中。 解决方案:修改SQL语句中对应的字段或者修改表里面对应的列名。
全栈程序员站长
2022/11/01
1.4K0
ora00904::标识符无效_ora-00911 无效字符
caffe源码分析-DataReader
DataReader作为DataLayer的数据成员变量,以多线程的方式从数据库(如lmdb, hdf5)读取数据:
bear_fish
2019/02/25
5030
caffe源码分析-DataReader
UWP WPF 解决 xaml 设计显示异常
例如我创建一个用户控件 TsjcyubtnTtqtjem 那么就可以在构造函数添加下面代码
林德熙
2022/08/04
7480
UWP WPF 解决 xaml 设计显示异常
例如我创建一个用户控件 TsjcyubtnTtqtjem 那么就可以在构造函数添加下面代码
林德熙
2018/09/19
1.1K0
UWP WPF 解决 xaml 设计显示异常
win10 uwp 捕获后台线程异常
本文告诉大家如何在 UWP 中捕获全局的后台线程异常,在出现后台线程异常时,将会让 UWP 程序闪退,但是在退出之前还是可以执行自己的代码
林德熙
2022/08/12
6150
win10 UWP 访问网页
Windows10 UWP 要访问 csdn博客,可以使用Windows.Web.Http.HttpClient,下面尝试访问一下我的博客 http://blog.csdn.net/lindexi_gd/article/details/50392343
林德熙
2022/08/04
5520
win10 UWP 访问网页 设置代理WebView
Windows10 UWP 要访问 csdn博客,可以使用Windows.Web.Http.HttpClient,下面尝试访问一下我的博客 http://blog.csdn.net/lindexi_gd/article/details/50392343
林德熙
2018/09/18
1.6K0
win10 UWP 访问网页
            设置代理WebView
win10 uwp 存放网络图片到本地 下载图片保存图片从本地打开所有代码Nuget安装Microsoft.Toolkit.Uwp
有时候我们的网络很垃圾,我的的UWP要在第一次打开网络图片,就把图片存放到本地,下次可以从本地打开。 有时候用户使用的是流量网络,不能每次都联网下载。 我们不得在应用存放用户打开的图片。 这就是先把图片下载,然后显示出来,存放到本地,接着下次要使用就可以从本地获取。 最好这个和我们用户是透明,我们不知道图片在哪,是本地还是网络,只要给一个Uri就有一个图片。
林德熙
2019/03/13
1.3K0
asp.net mvc HandleErrorAttribute 异常错误处理 无效!
现象:filters.Add(new HandleErrorAttribute()); 使用了全局的异常处理过滤。
旺财的城堡
2018/11/20
1.2K0
win10 uwp 存放网络图片到本地 下载图片保存图片从本地打开所有代码Nuget安装
有时候我们的网络很垃圾,我的的UWP要在第一次打开网络图片,就把图片存放到本地,下次可以从本地打开。 有时候用户使用的是流量网络,不能每次都联网下载。 我们不得在应用存放用户打开的图片。 这就是先把图片下载,然后显示出来,存放到本地,接着下次要使用就可以从本地获取。 最好这个和我们用户是透明,我们不知道图片在哪,是本地还是网络,只要给一个Uri就有一个图片。
林德熙
2018/09/18
1.3K0
win10 uwp 读取文本GBK错误
本文讲的是解决UWP文本GBK打开乱码错误,如何去读取GBK,包括网页GBK。最后本文给出一个方法追加文本。
林德熙
2018/09/18
1.3K0
win10 uwp 应用包上传失败无效的软件包系列名称
在 2021 的时候,微软为了解决开发者不小心将应用商店证书上传到 GitHub 而不再提供应用商店证书文件下载到代码文件夹里面,因此日常开发中将会使用自己本地创建的证书。但是在实际准备发布的时候,如果没有切换证书,那么将会使用本地创建的证书进行打包,而在上传应用商店步骤失败
林德熙
2021/03/24
1.2K0
Oracle报错ORA-00904: 标识符无效 ,但是列名和表名都没有写错
一般情况下,标识符错误是因为:语句中的列名在表中不存在,修改sql语句或者修改列名即可。
星哥玩云
2022/08/17
9.5K0
PageHelper分页后,对list操作会导致分页无效
来源:blog.csdn.net/qq_35080796/article/details/105508744
JAVA葵花宝典
2021/05/11
4K0
PageHelper分页后,对list操作会导致分页无效
快速入门 .NET nanoFramework 开发 ESP32-Pico 应用
.NET 支持物联网(IoT) 应用的开发,其提供的.NET IoT 库可以让我们在运行 Windwos 和 Linux 系统的 IoT 设备上运行应用,并利用 GPIO、SPI、I2C、PWM 和串行端口等接口使用数百个传感器、显示器、输入设备。但是这并不适用于受约束的嵌入式设备,比如 ESP32、M5Stack、STM32 等。对于这些受约束的嵌入式设备,.NET nanoFramework 提供了一个很好的方案,适用于这些微控制器,能够为受限嵌入式设备编写托管代码。开发者可以利用熟悉的 IDE Visual Studio 和 .NET(C#) 知识快速编写应用程序,而无需担心微控制器的低层硬件复杂性。更方便的是,使用 Visual Studio 可以直接在真实硬件上编写、部署、调试代码。
桑榆肖物
2023/01/03
2.9K0
快速入门 .NET nanoFramework 开发 ESP32-Pico 应用
dart(二)--函数、操作符、异常dart(二)--函数、操作符、异常
函数 dart中万物皆对象,函数也是一个对象 bool isNoble(int iNumber, String str='str'){ //普通函数,有参数、有返回值(若不指定表示返回值类型则为:dynamic);参数可以指定默认值 return iNumber != null; } bool isNoble => return iNumber != null; //箭头函数,有且只能有一个表达式 isNoble(iNumber:1,String:'ssd'); //调用 void f
用户8893176
2021/08/09
3580
java 标识符
A: 不能以数字开头 B: 不能是 Java 中的关键字 C: 区分大小写 Student,student 这是两个名称
Cell
2022/02/25
1.1K0
Oracle 无效对象查询,编译无效对象
查看当前无效对象 select * from dba_objects t where t.status = 'INVALID' order by 1; 编译无效对象: 有两种方式: 1、执行sql查询结果: select 'alter '||object_type||' '||owner||'.'||object_name||' compile;' from dba_objects t where t.status = 'INVALID' order by 1; 2、脚本编译: sqlplu
Lucifer三思而后行
2021/09/22
3K0
点击加载更多

相似问题

UWP SerialDevice阅读阿杜伊诺

126

UWP SerialDevice.FromIdAsync返回null

12

UWP抛出异常:由于对象的当前状态,操作无效

12

DataReader异常

13

Windows UWP Windows.Devices.SerialCommunication.SerialDevice不工作

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文