根据另一个下拉列表更新下拉列表值-jQuery [英] update dropdown values based on another dropdown - jQuery

问题描述

这是 小提琴

我的HTML中有两个下拉菜单项.

I have two dropdown items in my HTML.

where from和where to

在where to充满选项之前，您必须选择where from.

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"];

选择where from后，我想用索引中高于第一次选择的索引的数组中的项更新where to中的值.

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.

例如如果我选择Cagliari作为我的where from.

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

我的where to应该显示Barcelona, Malaga, Rio de Janeiro，但是我的where to下拉列表永远都不会得到任何值.

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

非常感谢您的帮助.

推荐答案

几件事，

首先，您需要将$("#travel_from").on( "selectmenuchange", ...更改为$("#travel_from").on( "change", ...

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

每次您也需要清除travel_to个城市，就像这样

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

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

如果首先要禁用travel_to下拉列表，则需要在HTML中为select提供disabled属性，然后在执行change事件时将其删除.

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

这篇关于根据另一个下拉列表更新下拉列表值-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！