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

Question

Fiddle here

这看起来有些复杂，所以我尽量做到尽可能一般。请看一下小提琴，让它更有意义。

一般的想法是将文本输入的name属性设置为前一个选定选项的下拉值。它运作良好。当你“添加过滤器”它正在克隆文本输入并使用相同的名称属性值时，麻烦就开始了。我将数据作为json提交，文本输入的name属性设置“key / value”对的“key”。这导致提交两个具有相同“密钥”的参数。我似乎只能在更改事件上更新文本输入的name属性。以下是原因。

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

我尝试过像.clone(false).find('input[type="text"]).attr('name','FOO').appendTo('.js-selectblock')

这样的东西

但是只克隆了文本输入，我无法知道将名称值设置为什么。代码正在禁用下拉列表中先前选择的值，这样就无法多次选择相同的值，我需要找到一种方法来动态设置文本输入的name属性以匹配下拉列表中的选定值

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

Answer 1

你必须这样做：

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

Updated Fiddle

在使用appendTo()之前，您必须先使用find()。

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