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

Question

我的情况是：

用户 selects 目的地（第一个下拉列表）
用户 select 是 attraction/activity（第二个下拉列表）
第三个下拉列表选项应该根据第一个和第二个下拉列表动态加载 selection.

我的加分是

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

我差不多明白了。当用户是 select 时，第二个 (attraction/activity) 下拉列表将根据 selection 加载第三个。它加载 'activities' 可以在 'colombo'

中找到

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

添加回选项

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

Select目的地
Select一个景点/activity
检查第三个下拉菜单
Select又是一个景点/activity
再次检查第 3 个下拉列表
您将看到新添加的选项。

我怎样才能解决这个问题并按照我上面的解释得到它？

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>');
        });
    }

});
});

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

How to load and remove dropdown options according to two other dropdown selection?

jquery-selectors

html-select

dropdown