克隆和動態設置輸入名稱值

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()僅返回所選的元素，即文本框，因此只會添加文本框。