以下代码可让您:
1.选择您要旅行的城市。选择城市可启用下一个控件
2.选择您要前往的城市。选择城市可启用下一个控制
3.选择要离开的日期。
除了您在 travel_from -list中选择的城市之后直接选择 travel_to 列表中的城市时,代码才能正常运行。我无法弄清楚为什么。即:如果你在 travel_from -controller和" Palermo"中选择"那不勒斯"在 travel_to-controller 中,未启用 travel_from_date 。
//Holds the names of all the cities
var allCities = ["Naples", "Palermo", "Cagliari", "Barcelona", "Malaga", "Rio de Janeiro"];
$(document).ready(function() {
$("#travel_from, #travel_to").selectmenu();
//Disables the travel_from_date-input field
$("#travel_from_date").prop("disabled", true);
$("#travel_to").selectmenu("disable");
$("#travel_from").on("selectmenuchange", function(event, ui) {
var cities = allCities.slice();
var selectedCity = $(this).val();
var index = cities.indexOf(selectedCity);
for (i = index; i > -1; i--) {
cities.splice(i, 1);
}
$("#travel_to").selectmenu('destroy');
$("#travel_to").selectmenu();
$("#travel_to option").remove();
$("#travel_to").append($('<option selected disabled></option').html("Where to?"));
$.each(cities, function(val, text) {
$("#travel_to").append(
$('<option></option>').val(text).html(text)
);
});
$("#travel_to option:selected").removeAttr("selected");
$("#travel_to").selectmenu("enable");
});
$("#travel_to").on("selectmenuchange", function(event, ui) {
$("#travel_from_date").prop("disabled", false);
});
});
&#13;
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form class="orderform">
<fieldset>
<h1>Book your voayage</h1>
<select id="travel_from">
<option disabled selected hidden>Where from?</option>
<option>Naples</option>
<option>Palermo</option>
<option>Cagliari</option>
<option>Barcelona</option>
<option>Malaga</option>
<option disabled>Rio de Janeiro</option>
</select>
<select id="travel_to">
<option disabled selected hidden>Where to?</option>
</select>
<hr>
<input id="travel_from_date" title="When do you want to leave?" type="text" name="travel_from_date" placeholder="Outbound" />
</fieldset>
</form>
&#13;