根据另一个下拉列表更新下拉列表值 - jQuery

Question

以下是fiddle

我的HTML中有两个下拉项。

where from和where to

在where from填充选项之前，您必须选择where to。

包含不同位置的数组如下所示：

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

选择where from后，我想更新where to中的值，其中数组中的项目的索引高于首次选择的索引。

E.g。如果我选择卡利亚里作为我的where from。

我的where to应显示Barcelona, Malaga, Rio de Janeiro，但我的where to下拉列表永远不会显示任何值。

非常感谢任何帮助。

Answer 1

有几件事，

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

每次举办此活动时，您还需要清除travel_to个城市，如此

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

如果您希望首先停用travel_to下拉菜单，则需要在HTML中提供select disabled属性，然后在执行此操作时将其删除改变事件。

HTML

<select id="travel_to" disabled>

JS

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

那就是它。这应该是你正在寻找的，这里是complete fiddle