創建更多divs顯示文本框後選擇與jquery

我有科學文章，我想記錄。每篇文章有多個參考文獻（最多100篇），而參考文獻可能是一本書或一篇文章。如果參考是一本書，我已經得到了書的作者姓名，書的頁碼等。如果它是一篇文章，那麼我必須獲得文章的期刊，文章的發表年份等。是差異）。創建更多divs顯示文本框後選擇與jquery

所以，我想讓用戶先選擇它是從下拉菜單中的文章還是書籍。那麼相關的文本框就會顯示出來。用戶填寫相關信息，參考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很新，我想可能有一個小問題，但我找不到.. 任何幫助深表感謝。。

來源

2012-02-27 teutara

首先，你是用一個ID克隆一個元素 - 不這樣做。其次，我不確定你的問題到底是什麼。 – Jeff 2012-02-27 09:44:49

我想要有無數的div，通過點擊按鈕添加。 – teutara 2012-02-27 09:46:25

爲什麼添加（）'？ - >'$（'。content'）。clone（）。appendTo（'body'）;' – elclanrs 2012-02-27 09:48:09

我做了這個搗鼓你：http://jsfiddle.net/MXXXT/16/

基本上，我做什麼，是爲每一個選擇一個模板，克隆它，然後再顯示它（作爲模板默認是隱藏的，看到CSS ）。

希望這會有所幫助。

編輯：小提琴更新

來源

2012-02-27 10:00:42 Jeff

謝謝傑夫。但是，在第三步中，它會創建三個選中的實例。你注意到了嗎？ – teutara 2012-02-27 10:03:33

編輯 - 我忘記克隆只有第一個:) – Jeff 2012-02-27 10:03:55

這只是你的問題的原始答案，你顯然必須修改它（驗證等） - 我們沒有做你的功課;） – Jeff 2012-02-27 10:05:12

創建更多divs顯示文本框後選擇與jquery

回答

相關問題