如何将 'Add More' 按钮添加到一组下拉列表中？

Question

当第一个（目的地）和第二个（景点或 activity）下拉列表是 select 选项时，第三个下拉列表动态显示可用的活动或景点。

这是演示：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>

那部分工作得很好。

现在我想添加更多（添加目的地）按钮来创建另一组相同的下拉列表。所以客人可以select多个景点而activity。为此，我在脚本中添加了以下 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

但问题是我无法在第二组或第三组下拉列表中加载 'availble attraction/activities'。

我认为这是因为我在 selected_destination 和 selected_attraction_or_activity.

中使用了相同的变量名称

var selected_attraction_or_activity+x 给我错误。

如何让它发挥作用？

根据选项 selected，我必须更改什么才能生成动态变量和数组以在第二和第三个动态生成的下拉列表中的第 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/

输出：

如何将 'Add More' 按钮添加到一组下拉列表中？

How to add 'Add More' button to a set of dropdown list?

javascript

jquery

variables

html-select