2016-03-30 49 views
0

我想創建form..So用戶添加更多的行可以一次添加多個數據.. 克隆使用這個插件jQuery的克隆與挑選出的第一排

Clone-section-of-form-using-jQuery

一切工作之後行初始化問題精..當我使用jQuery獲選插件下拉..這只是工作第一行..

Error Explain Image

我想需要創建每一行後,初始化選擇。但我不能編輯克隆形部的外形使用,jQuery的文件來達到這種效果..

我讀了所有相關的帖子..那些最使用舊的選擇插件的..現在天使用下面

類似的代碼顯示選擇
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2"> 
     <option value=""></option> 
     <option value="United States">United States</option> 
     </select> 

     <script type="text/javascript"> 
      var config = { 
       '.chosen-select'   : {}, 
       '.chosen-select-deselect' : {allow_single_deselect:true}, 
       '.chosen-select-no-single' : {disable_search_threshold:10}, 
       '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, 
       '.chosen-select-width'  : {width:"95%"} 
       } 
      for (var selector in config) { 
       $(selector).chosen(config[selector]); 
      } 
     </script> 

,所以我不知道如何應用上面的代碼克隆形式的插件:(

創建樣品結合克隆形式的插件,並獲選..

Download Link

任何一個可以幫助我

感謝

回答

1

好吧,我發現你的問題。我因此改變了代碼: 我封裝初始化成一個函數

function initSelects(baseSelector) { 
    var config = { 
     '.chosen-select' : {}, 
     '.chosen-select-deselect' : { 
      allow_single_deselect : true 
     }, 
     '.chosen-select-no-single' : { 
      disable_search_threshold : 10 
     }, 
     '.chosen-select-no-results' : { 
      no_results_text : 'Oops, nothing found!' 
     }, 
     '.chosen-select-width' : { 
      width : "95%" 
     } 
    } 
    for (var selector in config) { 
     $(selector, baseSelector).chosen(config[selector]); 
    } 
} 
initSelects('body'); 

,我已經改變了你的克隆代碼:

newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value 
    $('.chosen-container',newElem).remove(); 
    newElem.find("input:text").val("").end() 
    newElem.find("input[type=date]").val("").end() 
    newElem.appendTo('.clonedInput:last'); 
    $('select.chosen-select',newElem).show(); 
    initSelects(newElem); 

最重要的部分是:

  • 除去克隆從該新元素選的
  • 顯示(取消)選擇
  • 重新初始化選擇

此外,雖然它的工作原理,因爲它是爲好,我想你想使用newElem.insertAfter,而不是newElem.appendTo在你的克隆代碼。我認爲它更好地宣佈你的意圖。

+0

哇...令人難以置信的..它的工作:D 非常感謝 –