jQuery限制select範圍

310833_2493511346921_1870082822_n

在做選擇的時候,比方說要做時間選擇的時候,結束時間不能比開始時間早才是合理的操作,因為最近要用的,所以我就寫了一個,這是所有的元素本來就都存在的寫法,當然也可以試著用ajax的方式在選擇後再把後面的值吐出來,總之方法很多,這邊提供其中一個方法。

首先準備html如下:
<select id="begin_h">
<option>00</option>
<option>01</option>
...
<option>22</option>
<option>23</option>
</select>時 -
<select id="end_h">
<option>00</option>
<option>01</option>
...
<option>21</option>
<option>22</option>
<option>23</option>
</select>時

在jQuery裡,先判斷當開始時間改變,如果開始時間比結束時間大,就強制讓結束時間等於開始時間。
$num = $(this).val();
if($num > $("#end_h").val()){
$("#end_h").val($(this).val());
}

接著讓結束時間在開始時間之後的選項都隱藏就可以了。
$("#end_h").find("option:lt("+$num+")").hide();

我的專案是還要包含次選單分鐘值的選擇,要判斷如果時相同,結束時間的分不能小於開始時間分的值,加上一個頁面裡還有許多個相同的時間選擇器,寫起來就複雜許多,概念是這個的延伸,不過寫完還蠻有成就感的。
觀看效果

這邊有一些select的操作可以參考。
JQuery對select的操作[完整版]
jQuery - Select box manipulation
jQuery對select tag的操作

留言