update dropdown values based on another dropdown - jQuery

Question

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.

Andrew Brooke · Accepted Answer · 2015-11-06 17:05:31Z

2

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

answered Nov 6, 2015 at 17:05

Andrew Brooke

12.2k8 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

update dropdown values based on another dropdown - jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related