Как добавить кнопку «Добавить еще» в список раскрывающегося списка?

Question

, когда выпадающие списки 1-го (целевого) и 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> Remove также отлично работает. Вы можете проверить демонстрационную версию: http://codepen.io/foolishcoder7721/pen/jWYOxm

, но проблема в том, что я не могу загрузить «доступное притяжение/действия» на второй или третий набор выпадающего списка.

Я думаю, что из-за той же переменной ИМЯ Я использую в selected_destination и selected_attraction_or_activity.

var selected_attraction_or_activity+x дает мне ошибку.

Как это сделать?

Что мне нужно изменить, чтобы генерировать динамические переменные и массивы для загрузки доступных аттракционов/действий в третьем выпадающем списке в списке 2-го и 3-го динамически сгенерированных выпадающих списков в соответствии с выбранными параметрами?

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/

Выход: