2011-08-28 125 views
0

我有兩個下拉列表變化下拉的值的基礎上,其他下拉

下拉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功能,其中在下拉的值(時間)2應該總是比在下拉1選擇的值大的上方。即,如果用戶從DropDown 1中選擇11 AM,則DropDown 2必須包含所有大於11AM的值,即12PM,1PM,2PM,3PM,4PM,只有只有

回答

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(); 
} 
+0

你好mplungjan,謝謝你的回覆 –

0

這可能非常簡單。

將一組您的時間存儲在數組中。

通過它們循環加載啓動時間。

您的onChange事件應該獲取所選startTime的selectedIndex,並循環遍歷該數字中的times數組以加載endtime。

祝您的代碼順利。

+0

我很欣賞你的建議解決方案。 謝謝:) –