选择选项时启用文本字段

时间:2015-11-08 20:09:49

标签: javascript jquery html drop-down-menu jquery-ui-selectmenu

以下代码可让您:
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;
&#13;
&#13;

0 个答案:

没有答案