CODEWITHSUNDEEP
jquery-selectorshtml-selectdropdown
Foolish Coder
Foolish Coder

Reputation: 405

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

My situation is:

  1. user selects the destination (1st dropdown list)
  2. user selects the attraction/activity (2nd dropdown list)
  3. the 3rd dropdown list options should be loaded dynamically according to 1st and 2nd dropdown list selection.

my mark up is

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

And my jquery is

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

I almost get it. For when the user is select the 2nd (attraction/activity) dropdown list the 3rd is loaded according to the selection. it loads the 'activities' which can be found in 'colombo'

issue: when the user switches back to the other choice of attraction or activity dropdown list, the 3rd drop down list geeting added with options. But I want to remove the last loaded options and add back the options according to the new attraction/activity dropdown list selection.

Here is the demo : http://codepen.io/foolishcoder7721/pen/oboKML

  1. Select a destionation
  2. Select an attraction / activity
  3. check the 3rd drop down
  4. Select again a an attraction / activity
  5. check again 3rd drop down
  6. You will see newly added options.

How can I fix this and get it as I explained above?

Upvotes: 0

Views: 53

Answers (1)

Naqash Malik
Naqash Malik

Reputation: 1816

Empty third list on top:

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

});
});

Upvotes: 1

Related Questions