Question

我有两个下拉列表

下拉1

<form:select path="StartTimings" id="startTime" onchange="javascript:changeTiming()">
   <form:option value="9:00 AM">9:00 AM</form:option>
   <form:option value="10:00 AM">10:00 AM</form:option>
   <form:option value="11:00 AM">11:00 AM</form:option>
   <form:option value="12:00 PM">12:00 PM</form:option>
   <form:option value="1:00 PM">1:00 PM</form:option>
   <form:option value="2:00 PM">2:00 PM</form:option>
   <form:option value="3:00 PM">3:00 PM</form:option>
</form:select>

下拉2

<form:select path="EndTimings" id="endTime">
   <form:option value="10:00 AM">10:00 AM</form:option>
   <form:option value="11:00 AM">11:00 AM</form:option>
   <form:option value="12:00 PM">12:00 PM</form:option>
   <form:option value="1:00 PM">1:00 PM</form:option>
   <form:option value="2:00 PM">2:00 PM</form:option>
   <form:option value="3:00 PM">3:00 PM</form:option>
   <form:option value="4:00 PM">4:00 PM</form:option>
</form:select>

javascript功能片段

function changeTiming() {    
    var select1 = document.getElementById("startTime");

    if (select1.value == "10:00 AM") {
      document.getElementById("endTime").selectedIndex = 1;
    } else if (select1.value == "11:00 AM") {
      document.getElementById("endTime").selectedIndex = 2;
    } else if (select1.value == "12:00 PM") {
      document.getElementById("endTime").selectedIndex = 3;
    }

我需要一些帮助来编写/修改上面的javascript函数，其中 DropDown 2 中的值（时间）应始终大于 DropDown 1 中选择的值。即如果用户从DropDown 1中选择11 AM，则DropDown 2必须仅包含大于11 AM的所有值，即12PM，下午1点，下午2点，下午3点，下午4点。

Answer 1

DEMO HERE

window.onload=function() {
  var start = document.getElementById("startTime");
  var end   = document.getElementById("endTime");
  start.onchange=function() {
    end.options.length=0;
    for (var i=this.selectedIndex+1;i<this.options.length;i++) {
      end.options[end.options.length]=new Option(this.options[i].text,this.options[i].value);
    }
    end.options[end.options.length]=new Option("4:00 PM","4:00 PM");
  }
  start.onchange();
}

Answer 2

这可能非常简单。

将1组时间存储在数组中。

循环浏览它们以加载开始时间。

然后你的onChange事件应该选择startTime的selectedIndex并从该数字循环遍历时间数组以加载结束时间。

祝你的代码好运。

根据另一个下拉列表，下拉值的变化

2 个答案: