如何添加'添加更多'按鈕到一組下拉列表？

Question

當第一個（目標）和2（景點或活動）下拉列表中選擇的選項第三下拉列表中顯示可用的活動或旅遊景點動態。

這裏是演示：http://codepen.io/foolishcoder7721/pen/jWYOxm

我的標記：

<div class="multi-field-wrapper"> 
    <button type="button" class="add-field">Add Destination</button>   
    <div class="multi-fields"> 
    <div class="multi-field"> 
     <select class="text-one" name="destination[]"> 
      <option selected value="base">Please Select</option> 
      <option value="colombo">Colombo</option> 
     </select> 
     <br /> 

     <select class="text-two" name="attraction_or_activity[]"> 
      <option value="attraction_or_activity">Select the attractions or activities</option> 
      <option value="attraction">Attraction</option> 
      <option value="activity">Activity</option> 
     </select> 


     <select id="populated_attr_or_activity" name="attraction_or_activity_selected[]"> 
      <!-- here I ahve to populate the ARRAYS as option --> 
      <option value="available_attr_act">Available attractions/activities</option> 
     </select> 
    </div> 
</div> 

與jQuery的爲：

<script> 
$(document).ready(function() { 

    $(".text-two").change(function() { // when the attraction_OR_activity dropdown is selected 
    $('#populated_attr_or_activity').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before. 

     /* saving selected values in variables */ 
     var selected_destination = $('.text-one :selected').val(); 
     var selected_attraction_or_activity = $('.text-two :selected').val(); 

     colombo_attractions = new Array("Ganga Ramaya","National Art Gallery","Galle Face Green","Arcade Indepentent Square"); 
     colombo_activities = new Array("City Walk 2016","Traditional Dance Competition 2016","Local Spicy food"); 

     if (selected_destination == 'colombo' && selected_attraction_or_activity == 'attraction') { 
      colombo_attractions.forEach(function(t) { 
       $('#populated_attr_or_activity').append('<option>'+t+'</option>'); 
      }); 
     } 

     if (selected_destination == 'colombo' && selected_attraction_or_activity == 'activity') { 
      colombo_activities.forEach(function(t) { 
       $('#populated_attr_or_activity').append('<option>'+t+'</option>'); 
      }); 
     } 
    }); 
</script> 

這部分作品完美。

現在我想將添加更多（添加目的地）按鈕來創建另一個設置相同的下拉列表。所以客人可以選擇多個景點和活動。 爲此，我在腳本中添加了以下jQuery部分。

<script> 
    /* ADD DESTINATION */ 
    $('.multi-field-wrapper').each(function() { 
     var $wrapper = $('.multi-fields', this); 
     var x = 1; 
     $(".add-field", $(this)).click(function(e) { 
      x++; 
       $($wrapper).append('<div class="multi-field"><select class="text-one'+x+'" name="destination[]"><option selected value="base">Please Select</option><option value="colombo">Colombo</option><option value="kandy">Kandy</option><option value="anuradhapura">Anuradhapura</option></select><br/><select class="text-two'+x+'" name="attraction_or_activity[]"><option value="attraction_or_activity">Select the attractions or activities</option><option value="attraction">Attraction</option><option value="activity">Activity</option></select><select id="populated_attr_or_activity'+x+'" name="attraction_or_activity_selected[]"><option value="available_attr_act">Available attractions/activities</option></select><a href="#" class="remove_field">Remove</a></div>'); 
     }); 

     $($wrapper).on("click",".remove_field", function(e){ //user click on remove text 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 
    }); 
}); 
</script> 

我能當我點擊<button type="button" class="add-field">Add Destination</button> 刪除也能正常工作，以得到一組相同的下拉列表中。 您可以查看演示：http://codepen.io/foolishcoder7721/pen/jWYOxm

但問題是我無法加載第2或第3組下拉列表中的'availble attraction/activities'。

我認爲這是因爲我在selected_destination和selected_attraction_or_activity中使用了相同的變量名稱。

var selected_attraction_or_activity+x給我的錯誤。

如何使它發揮作用？

我不得不改變生成動態變量和數組裝載在根據所選擇的選項動態生成的下拉列表中的一組第二和第三的第三下拉列表中可用的景點/活動？

Answer 1

嘗試如下修改代碼，

HTML：

<div class="multi-field-wrapper"> 
     <button type="button" class="add-field">Add Destination</button>   
     <div class="multi-fields"> 
     <div class="multi-field"> 
      <select class="text-one" name="destination[]"> 
       <option selected value="base">Please Select</option> 
       <option value="colombo">Colombo</option> 
      </select> 
      <br /> 

      <select class="text-two" name="attraction_or_activity[]"> 
       <option value="attraction_or_activity">Select the attractions or activities</option> 
       <option value="attraction">Attraction</option> 
       <option value="activity">Activity</option> 
      </select> 
      <!--input id="attr_acti_btn" type="button" value="Click to Show!" /--> 

      <select class="populated_attr_or_activity" name="attraction_or_activity_selected[]"> 
       <!-- here I ahve to populate the ARRAYS as option --> 
       <option value="available_attr_act">Available attractions/activities</option> 
      </select> 
     </div> 
      <br/> 
      <!--div id="myDiv"></div> 
      <div id="attr_or_act_div"></div> 

      <!--a href="#" class="remove_field">Remove</a--> 

    </div> 

的Javascript：

$(document).ready(function() { 

$(document).on('change', '.text-two', function() { // when the attraction_OR_activity dropdown is selected 
    var destination = $(this).parents('.multi-field'); 
    $(destination).find('.populated_attr_or_activity').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before. 

    /* saving selected values in variables */ 
    var selected_destination = $(destination).find('.text-one :selected').val(); 
    var selected_attraction_or_activity = $(destination).find('.text-two :selected').val(); 

    colombo_attractions = new Array("Ganga Ramaya", "National Art Gallery", "Galle Face Green", "Arcade Indepentent Square"); 
    colombo_activities = new Array("City Walk 2016", "Traditional Dance Competition 2016", "Local Spicy food"); 

    if (selected_destination == 'colombo' && selected_attraction_or_activity == 'attraction') { 
     colombo_attractions.forEach(function (t) { 
      $(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>'); 
     }); 
    } 

    if (selected_destination == 'colombo' && selected_attraction_or_activity == 'activity') { 
     colombo_activities.forEach(function (t) { 
      $(destination).find('.populated_attr_or_activity').append('<option>' + t + '</option>'); 
     }); 
    } 


}); 

/* ADD DESTINATION */ 
$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    var x = 1; 
    $(".add-field", $(this)).click(function (e) { 
     x++; 
     $($wrapper).append('<div class="multi-field"><select class="text-one" name="destination[]"><option selected value="base">Please Select</option><option value="colombo">Colombo</option><option value="kandy">Kandy</option><option value="anuradhapura">Anuradhapura</option></select><br/><select class="text-two" name="attraction_or_activity[]"><option value="attraction_or_activity">Select the attractions or activities</option><option value="attraction">Attraction</option><option value="activity">Activity</option></select><select class="populated_attr_or_activity" name="attraction_or_activity_selected[]"><option value="available_attr_act">Available attractions/activities</option></select><a href="#" class="remove_field">Remove</a></div>'); 
    }); 

    $($wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

}）;

https://jsfiddle.net/2am152en/

Answer 2

<body> 
    <div id='main'> 
     Number: <input type="text" class="nums"/><br/> 
    </div> 
    <button id="more">Add More</button> 
    <button id="result">Resut</button> 
    <p><b>Total:</b>0</p> 
    <script type="text/javascript"> 
     jQuery(document).ready(function($) { 
      $('#more').on('click',function(e){ 
       var textFied = 'Number: <input type="text" class="nums"/><br/>'; 
       $('#main').append(textFied); 
      }); 

      $('#result').on('click',function(e){ 
       var nums = $('.nums'),total = 0; 
       $(nums).each(function(index, el) { 
        total+=$(el).val()*1; 
       }); 
       $('p').html('<b>Total:</b>'+total); 
      }); 
     }); 
    </script> 
</body> 

演示：https://jsfiddle.net/rampukar/5n1j3ehr/

輸出：