update dropdown values based on another dropdown -

Question

Here is the fiddle

I have two dropdown items in my HTML.

where from and where to

You have to chose where from before the where to is filled with options.

The array containing the different places looks like this:

 var allCities = ["Napoli", "Palermo", "Cagliari", "Barcelona", "Malaga", "Rio de Janeiro"];

After where from is chosen, I want to update the values in where to with the items in the array that has an index higher than the one that was first chosen.

E.g. If I choose Cagliari as my where from.

My where to should display Barcelona, Malaga, Rio de Janeiro, but my where to dropdown never gets any values.

Any help is much appreciated.

Answer 1

A couple of things,

First, you need to change the $("#travel_from").on( "selectmenuchange", ... to $("#travel_from").on( "change", ...

You'll also need to clear the travel_to cities each time you do this event, like so

$('#travel_to').find('option').remove();

If you want the travel_to dropdown to be disabled at first, you'll need to give the select the disabled property in your HTML, then remove it when you do the change event.

HTML

<select id="travel_to" disabled>

JS

$('#travel_to').prop('disabled', false);

That's it. This should be pretty much what you're looking for, here's a complete fiddle