2

我有想要记录的科学文章。每篇文章都有多个参考文献（最多 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 很陌生，我想可能有一个小问题，但我找不到.. 任何帮助都非常感谢..

4

1 回答 1

1

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

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

希望这可以帮助。

编辑：小提琴更新

于 2012-02-27T10:00:42.247 回答