1

下面的代码可以让你：
1. 选择你想去的城市。选择一个城市启用下一个控制。
2. 选择你想去的城市。选择一个城市启用下一个控件
3. 选择您要离开的日期。

代码运行良好，除了当您在travel_to -list 中选择一个城市时，该城市直接位于您在travel_from -list 中选择的城市之后。我不知道为什么。即：如果您在travel_from -controller中选择“Naples”，在travel_to-controller中选择“Palermo” ，则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);
	  });
	});
<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>

4

0 回答 0