克隆和动态设置输入名称值

Question

Fiddle here

这似乎有些复杂，所以我试图将尽可能通用。请看小提琴，让它更有意义。

总的想法是将文本输入的名称属性设置为前面选定的选项的下拉值。它工作得很好。当您'添加过滤器'它克隆文本输入并使用相同的名称属性值时，就会出现问题。我将数据提交为json，并且文本输入的名称属性设置“键/值”对的“键”。这会导致提交两个具有相同“密钥”的参数。我似乎只能在更改事件上更新文本输入的名称属性。下面的线是原因。

$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock'); 

我已经尝试了一些东西，如.clone(false).find('input[type="text"]).attr('name','FOO').appendTo('.js-selectblock')

但只克隆文字输入和我不知道该怎么名称值设置为方式。该代码禁用了以前在下拉列表中选择的值，这样就无法多次选择相同的值，我需要找出一种方法来动态设置文本输入的名称属性，使其与下拉列表中的所选值相匹配。

tl; dr - 根据选择列表选项的数量，需要更好的例程来动态添加搜索过滤器。克隆的文本输入的名称属性需要匹配其兄弟选择列表的选定值的值。

Answer 1

你必须做，是这样的：

$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock').find('input[type="text"]').attr('name','foo'); 

Updated Fiddle

必须使用find()使用前appendTo()第一。

find()仅返回所选的元素，即文本框，因此只会添加文本框。