如何根据另外两个下拉选项加载和删除下拉选项？

Question

我的情况是：

1. 用户选择目的地（第一个下拉列表）
2. 用户选择景点/活动（第二个下拉列表）
3. 第三个下拉列表选项应根据第一个和第二个下拉列表选择动态加载。

我的加分是

<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">Attraction</option>
        <option value="activity">Activity</option>
    </select>

    <select id="populated_attr_or_activity" name="attraction_or_activity_selected[]">
        <!-- here I have to populate the ARRAYS as option -->
    </select>
</div>

我的jquery是

<script>
$(document).ready(function() {
    $(".text-two").change(function() {

    /* 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>

我几乎得到了它。 当用户选择第二个（吸引力/活动）下拉列表时，根据选择加载第三个。 它加载'活动'，可以在'科伦坡'中找到

问题： 当用户切换回其他选择的景点或活动下拉列表时，第3个下拉列表geeting添加了选项。 但我想删除最后加载的选项，并根据新的景点/活动下拉列表选择添加选项。

以下是演示：http://codepen.io/foolishcoder7721/pen/oboKML

1. 选择一个destionation
2. 选择景点/活动
3. 查看第3个下拉列表
4. 再次选择一个景点/活动
5. 再次检查第3次下拉
6. 您将看到新添加的选项。

我如何解决这个问题并按照我上面的解释来解决？

Answer 1

排在最前面的第三个清单：

$(document).ready(function() {
$(".text-two").change(function() {
    $('#populated_attr_or_activity').html('');
/* 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>');
        });
    }

});
});