Javascript 动态添加的文本框附加到错误的表单元素

使用此JSFIDLE很容易看到：

我有两个下拉列表，它们的值根据您在第一个下拉列表中选择的内容而变化

这一切都很好，即使是表单提交，但我现在要做的是为第一个下拉列表中的一些值生成中间的下拉列表和文本框，而不是2个下拉列表

我让它稍微工作，但如果您先选择

escherpropname

，它会破坏随后添加的动态元素

非常感谢您的帮助

谢谢

---

Martin

我认为您需要改变添加文本框的方式，这里有一个解决方案

HTML:

jQuery：

// in document .ready change these lines
//$valuestextbox = $('.valuestextbox'); *remove*
//$valuestextbox.hide(); *remove*
// Create a textbox as needed
$valuestextbox = $('<input type="text" name="valuestextbox[]" class="valuestextbox"/>'); // *add*

...

// in your test for 'escherpropname'
//$valuestextbox.show(); *remove*
$values.after($valuestextbox.clone()); // *add*

//在文档中。准备好更改这些行了吗
//$valuestextbox=$（'.valuestextbox'）*除去*
//$valuestextbox.hide（）*除去*
//根据需要创建一个文本框
$valuestextbox=$（''）；//*加*
...
//在您的“escherpropname”测试中
//$valuestextbox.show（）*除去*
$values.after（$valuestextbox.clone（））；//*加*

---

更新的提琴：

谢谢你，看起来效果非常好。我刚刚完成工作，所以明天将尝试一下，并接受你的答案。我还有一个问题，关于如何在我的sql查询中实现文本框，如果它有一个文本框而不是下拉列表，但我可以明天问你，如果可以的话？谢谢，Martnjust做了更改，我的一个快速问题是，如果您选择

escherpropname

，但随后将其更改为

agent

，例如，文本框仍然保留，因此我想知道重新隐藏文本框并显示下拉列表的最佳方法是什么？通常我会使用

.show（）

和

.hide（）

，但这一行将我从

$values.after（$valuestextbox.clone（））中删除

在要返回到

代理的复选框中

可以删除带有

$（this.parent（）.find（“.valuestextbox”）.remove（）的选择文本框

并重新显示值下拉列表

$values.show（）。
// in document .ready change these lines
//$valuestextbox = $('.valuestextbox'); *remove*
//$valuestextbox.hide(); *remove*
// Create a textbox as needed
$valuestextbox = $('<input type="text" name="valuestextbox[]" class="valuestextbox"/>'); // *add*

...

// in your test for 'escherpropname'
//$valuestextbox.show(); *remove*
$values.after($valuestextbox.clone()); // *add*