これはやや複雑に見えるので、できるだけ一般的にしようとしています。それをより理解するには、フィドルを見てください。
一般的な考え方は、テキスト入力の名前属性をドロップダウンの前に選択されたオプションの値に設定することです。それは十分に機能します。「フィルターを追加」すると、テキスト入力が複製され、同じ name 属性値が使用されると、問題が発生します。データを json として送信しています。テキスト入力の name 属性は、「キー/値」ペアの「キー」を設定しています。これにより、同じ「キー」を持つ 2 つのパラメータが送信されます。変更イベントでテキスト入力の name 属性を更新することしかできないようです。下の行が原因です。
$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');
私はいくつかのものを試しました.clone(false).find('input[type="text"]).attr('name','FOO').appendTo('.js-selectblock')
しかし、それはテキスト入力を複製するだけで、名前の値を何に設定すればよいかわかりません。コードはドロップダウンで以前に選択した値を無効にしているため、同じ値を複数回選択できなくなります。テキスト入力の名前属性をドロップダウンから選択した値と一致するように動的に設定する方法も見つける必要があります。 .
tl;dr - 選択リスト オプションの数に基づいて検索フィルタを動的に追加するためのより良いルーチンが必要です。複製されたテキスト入力の name 属性は、兄弟の選択リストの選択された値の値と一致する必要があります。