如何根据其他两个下拉选择加载和删除下拉选项？

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>

我几乎明白了。 当用户选择第二个（景点/活动）下拉列表时，根据选择加载第三个。 它加载可以在“科伦坡”中找到的“活动”

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

这里是演示：http://codepen.io/foolishcoder7721/pen/oboKML

1. 选择目的地
2. 选择景点/活动
3. 检查第三个下拉菜单
4. 再次选择一个景点/活动
5. 再次检查第三个下拉菜单
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>');
        });
    }

});
});