Question

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

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

<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组下拉列表中加载“可用的吸引力/活动”。

我认为这是因为我在selected_destination和selected_attraction_or_activity中使用的同名变量NAME。

var selected_attraction_or_activity+x给了我错误。

怎样才能让它发挥作用？

根据所选的选项，我需要更改以生成动态变量和数组以在第3和第3动态生成下拉列表中的第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/

<强>输出：

如何在一组下拉列表中添加“添加更多”按钮？

2 个答案: