jQuery:将所有输入(选择、单选按钮、复选框等)的值从页面的一个部分复制到另一个部分
jQuery:将所有输入(选择、单选按钮、复选框等)的值从页面的一个部分复制到另一个部分
提问于 2013-01-27 00:07:33
有两个具有不同ids的div，但它们的结构完全相同。
<div id="block1">
<input type="text" class="class1" value="a">
<input type="text" class="class2" value="b">
<input type="checkbox" class="class3"> checkbox
<select class="class4">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div> 和
<div id="block2">
<input type="text" class="class1" value="a">
<input type="text" class="class2" value="b">
<input type="checkbox" class="class3"> checkbox
<select class="class4">
<option value="0">White</option>
<option value="1">Brown</option>
<option value="2">Gray</option>
</select>
</div> 在一页上。
我希望这两个块看起来完全一样。所以，如果你在block1中改变了一些东西，同样的事情也会发生在block2中，同样的改变也会发生在block1中，如果block2分别改变的话。
所以，我想
$("#block1").change(function () {
//apply ALL values from block1 to block2
});
$("#block2").change(function () {
//apply ALL values from block2 to block1
});这包括来自输入文本、输入复选框的值，甚至包括所选选项的选定值。所有输入的类别和类型分别是绝对相同的，选择框中的选项数量和值也是相同的。
使用jQuery做这件事的最短方法是什么？可以用一个jQuery字符串“复制”这些值吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-01-27 00:59:25
为所有元素创建单个通用更改处理程序：
向main元素添加一个类：
<div id="block1" class="blockClass">JS
/* ":input" selector includes all form controls*/
$('.blockClass :input').change(function () {
var $this = $(this);
var $otherInput = $('.blockClass').not($this.closest('.blockClass')).find('.' + this.className);
var isCheckable = $this.is(':radio,:checkbox');
if (isCheckable) {
$otherInput.prop('checked', this.checked);
} else {
$otherInput.val($this.val());
}
})演示：http://jsfiddle.net/5ghRS/
Stack Overflow用户
发布于 2013-01-27 00:11:08
我想说的是，可以使用单行复制策略，但仅适用于单一类型的输入标记。THe的问题是，不同输入标记的“值”必须有不同的处理。因此，要么在复制策略中需要一个条件(回调或切换)，要么需要不同的复制处理程序。
我倾向于后者，因为您可以使用jquery选择器轻松地识别不同类型的输入标记。
Stack Overflow用户
发布于 2013-01-27 00:15:14
这将工作得很好。在这里，第一行只是清除现有的html并附加来自#block1的克隆对象
您必须手动触发另一行代码来选择下拉列表的值
$("#block2").html('').append($("#block1").clone(true))
//$("#block2 select").val($("#block1 select").val())更新：
$("#block1 select").each(function(){
var cls = $(this).attr("class");
$("#block2").find("select."+cls+"").val($(this).val());
});更新：
它工作得很好。请参阅fiddle
更新2
已更新clone(true)的clone()，以指定也应复制事件处理程序
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14538739
复制相关文章
相似问题
腾讯云开发者
