在使用 jquery 选择选项后创建更多显示文本框的 div

Question

我有想要记录的科学文章。每篇文章都有多个引用（最多 100 个），引用可能是一本书或一篇文章。如果参考书是一本书，我会得到这本书的作者姓名、书的页码等。 如果是一篇文章，那么我必须得到文章的发表期刊，文章的发表年份等（有差异）。

所以，我想让用户首先从下拉菜单中选择它是文章还是书籍。然后相关的文本框将可见。用户填写相关信息，参考1即可。然后他将按添加按钮添加另一个引用，所以他首先看到的是下拉菜单，他选择一个选项，然后出现相关的文本框。 这是我所拥有的，

html:

<div id="content">    
<select id="select">
                <option value="">-chooese-</option>
                <option value="article">article</option>
                <option value="book">book</option>
    </select>

    <input class="article" name="ref_author_name[]"  type="text" id="ref_author_name" />
    <input class="article" name="ref_article_title[]"type="text" id="ref_article_title" />    
    <input class="book"    name="ref_author_name[]"  type="text" id="ref_author_name" />
    <input class="book"    name="ref_thesis_title[]" type="text" id="ref_thesis_title" />
    <input class="button-a" type="button" value="add"/>
</div>

jQuery

$(function() {
        $('#select').change(function() {
            $("input").hide().filter("." + $(this).find("option:selected").val()).show();
            $(":button").show();
        });
        $(":button").click(function(){
            $('#content').clone().add('#content').appendTo(document.body);
        });
    });

现在发生的情况是，当我选择书籍（第一个参考）时，会出现相关的文本框，如果我将选项更改为书籍，则会出现书籍相关的文本框。第一个选择框没有问题。

但是，当我按下添加按钮时，会显示新的下拉菜单（第二个参考），然后我选择一个选项，相关的文本框会再次出现。但是，事情是所有的选择变化，包括第一选择..

我对 jQuery 很陌生，我想可能有一个小问题，但我找不到.. 任何帮助都深表感谢..

Answer 1

我为你做了这个小提琴：http://jsfiddle.net/MXXXT/16/

基本上，我所做的是为每个选项创建一个模板，然后克隆它，然后显示它（因为模板默认隐藏，请参阅 CSS）。

希望这会有所帮助。

已编辑：小提琴已更新