使用JavaScript而不是HTML创建下拉列表

我有以下使用javascript创建和删除文本框的代码：

我的目标是使用这个功能创建一组三个下拉列表，而不是创建一个文本框

三个下拉列表的代码如下所示：

对于如何实现这一点，我有点困惑。我在“dropdown”div中添加了，我想的是获取这个div的innerHTML，以便每次使用它创建三个列表

我的另一个问题是如何使用它，使它们由javascript生成，而不是由HTML和javascript版本生成

谢谢你的帮助

马丁

编辑 我有按钮来创建下一行的3个下拉列表，但它们的功能与原始下拉列表不同，父下拉列表使用javascript来识别第一个下拉列表中的选择，以便更新其他两个，而克隆的下拉列表则失去了这一功能

代码cna可在此处找到：

---

最初的下拉列表使用dropdown.js，例如，为什么不使用jQuery之类的javascript库呢。这将使这件事和其他许多事情变得更容易。可以像这样实现您想要的：

$('body').append('<!-- ANY HTML GOES HERE -->')

$（'body'）。追加（“”）

为什么不使用像jQuery这样的javascript库呢。这将使这件事和其他许多事情变得更容易。可以像这样实现您想要的：

$('body').append('<!-- ANY HTML GOES HERE -->')

$（'body'）。追加（“”）

有两种基本方法；在JavaScript中创建所有元素，或者反复复制DOM的一部分（一些HTML）

人们通常将HTML放在脚本标记中（例如，请参见jQuery模板），然后获取标记的innerHTML并使用它。比如说,

<script type="text/plain" id="template">
    <!-- HTML that you want to duplicate in here -->
</script>
<div id="contentcontainer">
</div>
...
<script type="text/javascript">
var addAnother = function( ) {
    $("#contentcontainer").append(
        $("#template").html()
    );
};
</script>

...
var addother=函数（）{
$（“#contentcontainer”）.append(
$（“#模板”）.html（）
);
};

本例使用jQuery主要是因为jQuery的详细程度要低得多，而且更易于阅读，但您当然不必使用jQuery。在这里，addOther函数将从#模板复制HTML并将其附加到#contentcontainer中

---

在上面的尝试中，您可能指的是$（'body'）。append（$（'dropdown'））；'#dropdown’只是一个字符串，$（“#dropdown”）返回id=“dropdown”的元素。

有两种基本方法；在JavaScript中创建所有元素，或者反复复制DOM的一部分（一些HTML）

人们通常将HTML放在脚本标记中（例如，请参见jQuery模板），然后获取标记的innerHTML并使用它。比如说,

<script type="text/plain" id="template">
    <!-- HTML that you want to duplicate in here -->
</script>
<div id="contentcontainer">
</div>
...
<script type="text/javascript">
var addAnother = function( ) {
    $("#contentcontainer").append(
        $("#template").html()
    );
};
</script>

...
var addother=函数（）{
$（“#contentcontainer”）.append(
$（“#模板”）.html（）
);
};

本例使用jQuery主要是因为jQuery的详细程度要低得多，而且更易于阅读，但您当然不必使用jQuery。在这里，addOther函数将从#模板复制HTML并将其附加到#contentcontainer中

---

在上面的尝试中，您可能指的是$（'body'）。append（$（'dropdown'））；'#“dropdown”只是一个字符串，$（“#dropdown”）返回id=“dropdown”的元素。

谢谢，我尝试将下拉菜单代码放在“”中，但不起作用。还尝试了

$（'body'）.append（'dropdown'）

，但出于某种原因，它会打印出

#dropdown

，而不是div@马丁卡林87：应该。如果您想这样做，请查看以下内容：

$（'body'）.append（$（“#dropdown”）.html（）谢谢，我使用
函数addNew（）{var cloned=$（'#dropdown'）.clone（）；cloned.appendTo（“#advancedsearch”）}
但克隆的功能与原始的不同，因为原始的是动态的，并根据第一个下拉菜单中的选择填充其他两个。你知道为什么会发生thsi吗？克隆没有复制数据和事件。我认为克隆上还有第二个选项可以复制事件。否则，您需要将事件重新绑定到新元素。将代码放在JSFIDLE上，我可以查看一下。谢谢，我尝试将下拉菜单代码放在“”中，但它不起作用。还尝试了
$（'body'）.append（'dropdown'）
，但出于某种原因，它会打印出
#dropdown
，而不是div@马丁卡林87：应该。如果您想这样做，请查看以下内容：
$（'body'）.append（$（“#dropdown”）.html（）谢谢，我使用
函数addNew（）{var cloned=$（'#dropdown'）.clone（）；cloned.appendTo（“#advancedsearch”）}
但克隆的功能与原始的不同，因为原始的是动态的，并根据第一个下拉菜单中的选择填充其他两个。你知道为什么会发生thsi吗？克隆没有复制数据和事件。我认为克隆上还有第二个选项可以复制事件。否则，您需要将事件重新绑定到新元素。将代码放在JSFIDLE上，我可以看一下。谢谢，我使用
函数addNew（）{var cloned=$（'#dropdown'）.clone（）；cloned.appendTo（“#advancedsearch”）}
但克隆的功能与原始的不同，因为原始的是动态的，并根据第一个下拉菜单中的选择填充其他两个。你知道为什么会发生thsi吗？谢谢，我使用
函数addNew（）{var cloned=$（'#dropdown'）.clone（）；cloned.appendTo（“#advancedsearch”）}
但克隆的功能与原始的不同，因为原始的是动态的，并根据第一个下拉菜单中的选择填充其他两个。你知道为什么会这样吗？