2

記録したい科学論文があります。各記事には複数の参照 (最大 100) があり、参照は書籍または記事である可能性があります。参考文献が書籍の場合、書籍の著者名、書籍のページ番号などを取得します。記事の場合、記事の発行されたジャーナル、記事の発行年などを取得する必要があります。違い）。

そのため、最初にドロップダウンメニューから記事か本かをユーザーに選択させたいと思います。関連するテキストボックスが表示されます。ユーザーは関連情報を入力し、参照 1 は OK です。次に、彼は追加ボタンを押して別の参照を追加するので、最初にドロップダウンメニューが表示され、オプションを選択すると、関連するテキストボックスが表示されます..これが私が持っているものです.

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);
        });
    });

今何が起こるかというと、本 (最初の参照) を選択すると、関連するテキスト ボックスが表示され、オプションを本に変更すると、本に関連するテキスト ボックスが表示されます。最初のセレクトボックスは問題ありません。

しかし、追加ボタンを押すと、新しいドロップダウンメニューが表示され(2番目の参照)、オプションを選択すると、関連するテキストボックスが再び表示されます。しかし、問題は、最初の選択を含むすべての選択の変更です..

私はjQueryに非常に慣れていないので、小さな問題があると思いますが、見つけることができません..どんな助けでも大歓迎です..

4

1 に答える 1

1

私はあなたのためにこのフィドルを作りました: http://jsfiddle.net/MXXXT/16/

基本的に、私がしていることは、各オプションのテンプレートを作成し、それを複製してから表示することです (テンプレートはデフォルトで非表示になっているため、CSS を参照してください)。

お役に立てれば。

編集済み: フィドルが更新されました

于 2012-02-27T10:00:42.247 に答える