Question

我有一个div，其中包含一个带有两个选择菜单的表单。

我使用下面的代码克隆并移动包含选择（而不是整个表单）的div：

$(document).ready(function(){
        var cloned_language = $('#order__header').clone();
        var header_languages = $('.top_menu.main_menus');
        (header_languages).append(cloned_language);
      });

问题是选择菜单的功能现在已经破坏。这是我得到的错误：未捕获TypeError：无法调用null的方法'submit'。

有关如何修复它的任何想法？如何将克隆的选择与原始选择链接？通过“链接”，我的意思是当我点击克隆的（选择相同的选项）时，我希望原始选择更改。

LE：我尝试克隆（true），但事件没有保留。

Answer 1

假设您的原始评价为id="original_Select"，而新评价为id="cloned_Select"

$(document).on("change","#cloned_Select",function(){
     $("#original_Select").val($(this).val())
})
$(document).on("change","#original_Select",function(){
         $("#cloned_Select").val($(this).val())
    })

因此，当其中一个选择更改时，另一个也会改变

Answer 2

问题是选择菜单的功能现在已经破坏。这是我得到的错误：未捕获的TypeError：无法调用null的提交方法。

听起来您将克隆的select元素放在原始所在的form元素的之外。然后在他们的更改（？）处理程序中尝试访问表单的提交方法，但是您的克隆没有引用该表单，因为它们不在其中。

首先，你必须解决这个问题，在处理程序内部以其他方式引用特定的表单元素，例如： var form = $("#formid");

然后我想你希望克隆选择的当前值也与表单一起发送 - 这不会发生，因为它们不在其中。因此，在提交表单之前，您必须将克隆中的选定值“转移”到原始文件（通过将后者的相应option元素设置为selected）。

如果我在这些假设中是正确的;-)，并且您需要进一步的帮助 - 那么请向我们展示更多用于处理选择字段上的事件的实际JS代码。

Answer 3

为什么不重新绑定它？假设这是你的事件：

$('#order__header').change(function (){
      //your code
});

取出该功能并命名：

function changeEvent(){
      //your code
}

然后将事件处理程序更改为：

$('#order__header').change(changeEvent);

然后，在克隆之后，重新绑定它。

 var cloned_language = $('#order__header').clone();
 cloned_language.on("change", changeEvent);

但需要更多代码才能使这一假设成为解决方案。

jquery：如何移动<select>并保持功能</select>

3 个答案: