基于另一个下拉更新下拉值 - jQuery

Question

这里是fiddle

我在我的HTML中有两个下拉项。

where from和where to

你必须选择where from前where to充满了选择。

含有不同地方的阵列看起来像这样：where from选择

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

后，我想在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中提供selectdisabled属性，然后在执行操作时将其删除变化事件。

HTML

<select id="travel_to" disabled> 

JS

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

就是这样。这应该是你正在寻找的东西，这里是一个complete fiddle