基于另一个下拉列表的Jquery过滤器下拉列表

时间:2011-12-05 07:08:41

标签: jquery

我试图根据另一个下拉列表过滤下拉列表。

我有下面的下拉结构..

*一旦我在第一个下拉列表中选择8:00,它应该在下一个8:30填充,然后是其他项目(应该追加)。

*如果在第一个DDL中选择8:00,则第二个DDL不应该在24:00之后显示项目....(应该有一个规定只能在24小时内选择)。

<asp:DropDownList ID="ddlFrom" runat="server">
<asp:ListItem value="1">8:00</asp:ListItem>
<asp:ListItem value="2">8:30</asp:ListItem>
<asp:ListItem value="3">9:00</asp:ListItem>
<asp:ListItem value="4">9:30</asp:ListItem>
<asp:ListItem value="5">10:00</asp:ListItem>
<asp:ListItem value="6">10:30</asp:ListItem>
<asp:ListItem value="7">11:00</asp:ListItem>
<asp:ListItem value="8">11:30</asp:ListItem>
<asp:ListItem value="9">12:00</asp:ListItem>
<asp:ListItem value="10">12:30</asp:ListItem>
<asp:ListItem value="11">13:00</asp:ListItem>
<asp:ListItem value="12">13:30</asp:ListItem>
<asp:ListItem value="13">14:00</asp:ListItem>
<asp:ListItem value="14">14:30</asp:ListItem>
<asp:ListItem value="15">15:00</asp:ListItem>
<asp:ListItem value="16">15:30</asp:ListItem>
<asp:ListItem value="17">16:00</asp:ListItem>
<asp:ListItem value="18">16:30</asp:ListItem>
<asp:ListItem value="19">17:00</asp:ListItem>
<asp:ListItem value="20">17:30</asp:ListItem>
<asp:ListItem value="21">18:00</asp:ListItem>
<asp:ListItem value="22">18:30</asp:ListItem>
<asp:ListItem value="23">19:00</asp:ListItem>
<asp:ListItem value="24">19:30</asp:ListItem>
<asp:ListItem value="25">20:00</asp:ListItem>
<asp:ListItem value="26">20:30</asp:ListItem>
<asp:ListItem value="27">21:00</asp:ListItem>
<asp:ListItem value="28">21:30</asp:ListItem>
<asp:ListItem value="29">22:00</asp:ListItem>
<asp:ListItem value="30">22:30</asp:ListItem>
<asp:ListItem value="31">23:00</asp:ListItem>
<asp:ListItem value="32">23:30</asp:ListItem>       
<asp:ListItem value="34">00:30</asp:ListItem>
<asp:ListItem value="35">1:00</asp:ListItem>
<asp:ListItem value="36">1:30</asp:ListItem>
<asp:ListItem value="37">2:00</asp:ListItem>
<asp:ListItem value="38">2:30</asp:ListItem>
<asp:ListItem value="39">3:00</asp:ListItem>
<asp:ListItem value="40">3:30</asp:ListItem>
<asp:ListItem value="41">4:00</asp:ListItem>
<asp:ListItem value="42">4:30</asp:ListItem>
<asp:ListItem value="43">5:00</asp:ListItem>
<asp:ListItem value="44">5:30</asp:ListItem>
<asp:ListItem value="45">6:00</asp:ListItem>
<asp:ListItem value="46">6:30</asp:ListItem>
<asp:ListItem value="47">7:00</asp:ListItem>
<asp:ListItem value="48">7:30</asp:ListItem>
 </asp:DropDownList>
 To: <asp:DropDownList ID="ddlTo" runat="server">
<asp:ListItem value="2">8:30</asp:ListItem>
<asp:ListItem value="3">9:00</asp:ListItem>
<asp:ListItem value="4">9:30</asp:ListItem>
<asp:ListItem value="5">10:00</asp:ListItem>
<asp:ListItem value="6">10:30</asp:ListItem>
<asp:ListItem value="7">11:00</asp:ListItem>
<asp:ListItem value="8">11:30</asp:ListItem>
<asp:ListItem value="9">12:00</asp:ListItem>
<asp:ListItem value="10">12:30</asp:ListItem>
<asp:ListItem value="11">13:00</asp:ListItem>
<asp:ListItem value="12">13:30</asp:ListItem>
<asp:ListItem value="13">14:00</asp:ListItem>
<asp:ListItem value="14">14:30</asp:ListItem>
<asp:ListItem value="15">15:00</asp:ListItem>
<asp:ListItem value="16">15:30</asp:ListItem>
<asp:ListItem value="17">16:00</asp:ListItem>
<asp:ListItem value="18">16:30</asp:ListItem>
<asp:ListItem value="19">17:00</asp:ListItem>
<asp:ListItem value="20">17:30</asp:ListItem>
<asp:ListItem value="21">18:00</asp:ListItem>
<asp:ListItem value="22">18:30</asp:ListItem>
<asp:ListItem value="23">19:00</asp:ListItem>
<asp:ListItem value="24">19:30</asp:ListItem>
<asp:ListItem value="25">20:00</asp:ListItem>
<asp:ListItem value="26">20:30</asp:ListItem>
<asp:ListItem value="27">21:00</asp:ListItem>
<asp:ListItem value="28">21:30</asp:ListItem>
<asp:ListItem value="29">22:00</asp:ListItem>
<asp:ListItem value="30">22:30</asp:ListItem>
<asp:ListItem value="31">23:00</asp:ListItem>
<asp:ListItem value="32">23:30</asp:ListItem>   
<asp:ListItem value="34">00:30</asp:ListItem>
<asp:ListItem value="35">1:00</asp:ListItem>
<asp:ListItem value="36">1:30</asp:ListItem>
<asp:ListItem value="37">2:00</asp:ListItem>
<asp:ListItem value="38">2:30</asp:ListItem>
<asp:ListItem value="39">3:00</asp:ListItem>
<asp:ListItem value="40">3:30</asp:ListItem>
<asp:ListItem value="41">4:00</asp:ListItem>
<asp:ListItem value="42">4:30</asp:ListItem>
<asp:ListItem value="43">5:00</asp:ListItem>
<asp:ListItem value="44">5:30</asp:ListItem>
<asp:ListItem value="45">6:00</asp:ListItem>
<asp:ListItem value="46">6:30</asp:ListItem>
<asp:ListItem value="47">7:00</asp:ListItem>
<asp:ListItem value="48">7:30</asp:ListItem>
<asp:ListItem value="1">8:00</asp:ListItem>
</asp:DropDownList>

我尝试使用以下脚本:

<script language="javascript">

function changeDDL()
   {
        $(function () {
            $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom").change(function (e) {
                $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlTo").empty();

                var options = 
                $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option").filter(function(e){
                    //return $(this).attr("value") > $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option:selected").val();
                    return parseInt($(this).attr("value"),10) > parseInt($("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option:selected").val(),10);

                }).clone();

                $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlTo").append(options);
            });
        });
        }
</script>

但没有得到正确的结果......

0 个答案:

没有答案